Allow resizing controls

[ernestognw]

Description

In some contexts is convenient to change the width of the controls.

Google.Chrome.mp4

[ericglau]

Nice! Just a few comments:

• If you expand the nav almost all of the way to the right:
  1. The "Deploy" button partly gets covered.
  2. If you click "Deploy", the arrows to close the Deploy modal get hidden. This may need some adjusting of the z-indexes, such as here.

Screen.Recording.2025-05-30.at.6.03.21.PM.mov

• The space between expand/collapse arrows and the question mark isn't constant.

Screen.Recording.2025-05-30.at.6.08.02.PM.mov

• Can you apply this change to the other languages under packages/ui/src/*/App.svelte?

[ernestognw]

Thanks for reviewing @ericglau!

If you expand the nav almost all of the way to the right

Right! I didn't consider much of the potential UI issues on the borders. I also think it makes sense to restrict to a minimum width. So I set it to min-w-72 and for the maximum I took the fixed width of the Defender sidebar (360px) plus roughly 40 px for the close button (It's weird to measure, it's kinda floating).

The constrained sizes should make it better now

The space between expand/collapse arrows and the question mark isn't constant.

Also pretty good catch! I adjusted and removed an unused align property in the HelpTooltip component. Should be fine now

Can you apply this change to the other languages under packages/ui/src/*/App.svelte?

Done!

[ericglau]

LGTM, thanks!

[CoveMB]

Looking pretty good thanks ✨
I am wondering if maybe it would make sense to display the resizing arrow ↔ all along the left border of the settings?