From f115cb454fa2c92f3f1b47947b00ad8c30a9507b Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 12 May 2026 14:04:56 -0500
Subject: [PATCH] style(switcher): widen dropdown, tighten rows, prevent
 org-line wrap

Visual polish to match the new device-count info in ce332ea. The
sidebar-constrained 188px dropdown was too narrow once a second
info chunk ('. N devices') joined the org name on the muted subtitle
line - long names like 'BRASA SALA\'s organization . 2 devices'
wrapped, doubling row height for half the dropdown.

Width: was left:0 + right:0 (= sidebar content width 188px). Now
left:0 + min-width:280px + max-width:360px. Detaches from the
sidebar (which is z-indexed) and extends into the main content area;
the max bound prevents indefinite sprawl on pathological org names.

Row height: padding 10px 12px -> 8px 12px; ws-org margin-top 2px -> 1px.
~58px per row -> ~46px. Less density-heavy at the platform_admin scale
(37 rows visible).

Menu padding: 4px 0 added on the panel so the first/last rows don't
sit flush against the panel border (fixes the 'first row clipped'
visual the tighter rows would otherwise still show).

Max-height: 320px -> 360px. Modest bump now that rows are shorter -
shows ~7 rows at once vs ~5 before.

.ws-org gains white-space:nowrap + overflow:hidden + text-overflow:ellipsis
so the org+count line truncates instead of wrapping. The 360px max-width
sets the truncation threshold.
---
 frontend/css/main.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/css/main.css b/frontend/css/main.css
index 1131c0e..b34fa35 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -65,15 +65,20 @@ body {
 .workspace-switcher.open .chev { transform: rotate(180deg); }
 .workspace-switcher-menu {
   display: none;
-  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
+  /* Width: detach from the narrow sidebar-header (188px content width). The
+     sidebar is z-indexed and the dropdown is free to extend beyond the
+     sidebar into the main content area. min/max bounds keep it readable
+     for normal-length names without sprawling on extreme cases. */
+  position: absolute; top: calc(100% + 4px); left: 0;
+  min-width: 280px; max-width: 360px;
   background: var(--bg-card); border: 1px solid var(--border);
   border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-  max-height: 320px; overflow-y: auto; z-index: 100;
+  max-height: 360px; padding: 4px 0; overflow-y: auto; z-index: 100;
 }
 .workspace-switcher.open .workspace-switcher-menu { display: block; }
 .workspace-switcher-item {
   display: flex; align-items: center; gap: 8px;
-  padding: 10px 12px; cursor: pointer;
+  padding: 8px 12px; cursor: pointer;
   border-bottom: 1px solid var(--border);
   color: var(--text-primary); font-size: 13px;
 }
@@ -88,7 +93,10 @@ body {
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .workspace-switcher-item .ws-org {
-  font-size: 11px; color: var(--text-muted); margin-top: 2px;
+  font-size: 11px; color: var(--text-muted); margin-top: 1px;
+  /* nowrap + ellipsis: long "Org Name . N devices" lines truncate cleanly
+     instead of wrapping onto a second line that doubles row height. */
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .workspace-switcher-pencil {
   flex-shrink: 0; visibility: hidden;