Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-05-15 07:32:23 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

style(switcher): widen dropdown, tighten rows, prevent org-line wrap

Browse source 
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.
This commit is contained in:
ScreenTinker 2026-05-12 14:04:56 -05:00
parent ce332ead67
commit f115cb454f
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/css/main.css
View file

@ -65,15 +65,20 @@ body {
.workspace-switcher.open .chev { transform: rotate(180deg); } .workspace-switcher.open .chev { transform: rotate(180deg); }
.workspace-switcher-menu { .workspace-switcher-menu {
display: none; 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); background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.3); 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.open .workspace-switcher-menu { display: block; }
.workspace-switcher-item { .workspace-switcher-item {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 10px 12px; cursor: pointer; padding: 8px 12px; cursor: pointer;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
color: var(--text-primary); font-size: 13px; color: var(--text-primary); font-size: 13px;
} }
@ -88,7 +93,10 @@ body {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.workspace-switcher-item .ws-org { .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 { .workspace-switcher-pencil {
flex-shrink: 0; visibility: hidden; flex-shrink: 0; visibility: hidden;