fix(CodeTools): optimize layout and improve styling

[gophlet]

What this PR does

Before this PR:

After this PR:

Why we need it and why it was done in this way

The following tradeoffs were made:

• CSS clamp() with a suitable range was used to keep vertical spacing responsive, allowing it to stretch or shrink with the viewport but never causing content overflow. This approach maintains layout flexibility without exceeding design limits.

The following alternatives were considered:

• A full page layout redesign was considered, but this would require more effort and introduce unnecessary complexity. The clamp() solution achieves the intended effect simply and maintainably.

Checklist

This checklist is not enforcing, but it's a reminder of items that could be relevant to every PR.
Approvers are expected to review this list.

• PR: The PR description is expressive enough and will help future contributors
• Code: Write code that humans can understand and Keep it simple
• Refactor: You have left the code cleaner than you found it (Boy Scout Rule)
• Upgrade: Impact of this change on upgrade flows was considered and addressed if required
• Documentation: A user-guide update was considered and is present (link) or not required. You want a user-guide update if it's a user facing feature.

Release note

NONE