Skip to content

Commit cbdd941

Browse files
authored
fix(toolbar): size the Project and Add Data menus to their content (#1914)
Both menus set a fixed `w-64` on DropdownMenuContent, so they rendered at 256px whatever they held. Add Data's longest label, "File Geodatabase (GDB)", is 151px, leaving roughly 100px of dead space to the right of every one of its 31 entries. They were the only two toolbar menus doing this. View and Edit use a `min-w-*` floor; Processing, Controls, Help and Plugins pass no width class at all and shrink to fit over the primitive's own min-w-[8rem]. Dropping the class puts these two on that majority path. Measured on the built app at 1440x900, unchanged in light and dark: Project 256px -> 167px (longest label "Save as template...", 119px) Add Data 256px -> 177px (longest label "File Geodatabase (GDB)", 151px) Project keeps ~24px of slack for the chevrons on its three submenu rows. Shrink-to-fit also means a locale with longer labels grows instead of being pinned: Add Data measures 180px in German, 287px in Vietnamese and 182px in Arabic, with no horizontal overflow in any of them, still capped by the primitive's max-w-[calc(100vw-1rem)]. ControlsMenu's two `w-64` submenus are left alone: they hold sliders, which need a width to be usable.
1 parent 579a725 commit cbdd941

2 files changed

Lines changed: 8 additions & 2 deletions

File tree

apps/geolibre-desktop/src/components/layout/toolbar/AddDataMenu.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,12 @@ export function AddDataMenu({
120120
{chrome.renderLabel(t("toolbar.menu.addData"))}
121121
</Button>
122122
</DropdownMenuTrigger>
123-
<DropdownMenuContent align="start" className="w-64">
123+
{/* No width class: the primitive's min-w-[8rem] floor plus shrink-to-fit
124+
sizes the menu to its longest label, the way Processing/Controls/Help
125+
already do. A fixed w-64 pinned it to 256px whatever it held, which
126+
left ~100px of dead space to the right of every entry, and would clip
127+
a locale whose labels run past 256px instead of growing. */}
128+
<DropdownMenuContent align="start">
124129
<DropdownMenuLabel>{t("toolbar.menu.addData")}</DropdownMenuLabel>
125130
<DropdownMenuSeparator />
126131
{sections.map((group, index) => (

apps/geolibre-desktop/src/components/layout/toolbar/ProjectMenu.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ export function ProjectMenu({
143143
{chrome.renderLabel(t("toolbar.menu.project"))}
144144
</Button>
145145
</DropdownMenuTrigger>
146-
<DropdownMenuContent align="start" className="w-64">
146+
{/* No width class — see AddDataMenu: shrink-to-fit over a fixed w-64. */}
147+
<DropdownMenuContent align="start">
147148
<DropdownMenuLabel>{t("toolbar.menu.project")}</DropdownMenuLabel>
148149
<DropdownMenuSeparator />
149150
{show("project.new") && (

0 commit comments

Comments
 (0)