fix(ui): prevent header compression in component preview overlay at 1024 - 1120px

[72umesh]

Description

In the component preview overlay toolbar, the header section (Preview/Code tabs, variant toggle, and action buttons) was getting visually compressed/squished at certain desktop breakpoints, specifically between approximately 1024px and 1110px.

Root cause: The flex layout with justify-between allowed elements to shrink when the container width was tight, even though it looked fine below 1024px and above ~1110px.

What I Improved:

• Added shrink-0 to key flex children (TabsList, variant toggle, and actions group) to prevent unwanted compression.
• Made the "Open Full Page" link responsive: it now shows "Open" + icon in the problematic narrow range, and switches to "Open Full Page" at min-[1120px] and above.
• Improved spacing with better responsive gaps, padding and removed fixed right margins that were wasting space.

This results in a clean, non-squished layout across all breakpoints without horizontal overflow.

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Tested locally with dev server by manually resizing the browser window across multiple widths:

  • 1000px – 1024px (mobile/desktop transition)
  • 1024px – 1110px (the previously problematic range)
  • 1120px – 1280px+ (wide desktop)

• Verified behavior both with and without the variant toggle enabled.

• Checked that tabs, buttons, and link text remain fully readable with no squishing or wrapping issues.

• Tested locally with dev server

• Checked against Lint & TypeScript errors

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Added new component/dashboard to registry and checked indexing numbers

Screenshots :

• Before: Screenshot at ~1070px showing the squished header

• After: Screenshot at the same width showing the fixed layout