tray apparatus scales w. fluid rem; sig-select 9×2 middling breakpoint — $handle-exposed was 48px fixed while #id_tray_btn is 3rem, so on big-rem viewports (clamp(14px, 2.4vmin, 22px) → up to 22px on tall screens, btn=66) the btn's flex parent (#id_tray_handle) shrank the btn from 66×66 → 48×66 via default flex-shrink:1 in portrait (elongated tall ellipse), and in landscape the btn overflowed the 48px-tall handle vertically (extending 9px past viewport top in closed state); fix: $handle-exposed: 3rem matches the btn so it fills the exposed area at every rem; $handle-rect-h: 4.5rem (was 72px) gives the visible rail thickness a touch of breathing room around the btn at every scale; landscape rules in the same partial that hard-coded 48px / 72px (#id_tray_handle { height: 48px }, #id_tray_grip { bottom: calc(48px/2 - 0.125rem); width: 72px }) now reference the variables so they track in sync — tray.js _computeBounds() swapped from _btn.offsetWidth/Height → _handle.offsetWidth/Height for the same reason: even with the SCSS fix, measuring the btn would re-introduce the offset when btn and handle drift (which they shouldn't now, but the handle is the layout-defining element so measure it directly); id_kit_btn added as fallback for id_gear_btn (which no longer renders on the room page) so the open-state landscape wrap height anchors to the bottom-right kit btn instead of the full viewport — id_tray_handle cached on the module via _handle ref alongside _btn and cleared in reset() ; sig-select grid jumped straight from 6 cols (narrow landscape) → 18 cols × 3rem at min-width: 900px, but 18×3rem + 7rem modal margins needs ~1376px to clear at rem=22 so the cards spilled off the sides on common 1280-wide laptops + the previous-era 9×2 middling layout had simply been dropped; new cascade in _card-deck.scss mirrors the comment's documented intent: 6 cols default landscape (row layout, stage beside grid) → 9 cols × 3rem at min-width: 900px (column layout, stage above grid) → 18 cols × 3rem at min-width: 1400px → 18 × 5rem at min-width: 1800px (unchanged) — verified in Claudezilla across iphone-14 portrait (rem=14, btn=42 square, handle right edge at viewport right), 816×826 portrait near-landscape (rem=19.6, btn=58.75 square no longer elongated), 1149×751 landscape mid (rem=18, btn=54 square at viewport top, 9×2 grid), 1789×1111 desktop XL (rem=22, btn=66 square at viewport top, 18×1 grid)

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_tray.scss

@@ -20,8 +20,9 @@
 
 $tray-w:         280px;
 $handle-rect-w:  10000px;
-$handle-rect-h:   72px;
-$handle-exposed:  48px;
+$handle-rect-h:  4.5rem;  // visible rail thickness — scales w. rem; ≈ btn (3rem) + breathing room
+$handle-exposed:   3rem;  // matches #id_tray_btn so the btn fills the exposed handle area
+                          // (previously 48px → flex-shrink squished the btn on rem > 16px viewports)
 $handle-r:         1rem;
 $tray-bevel:    0.3rem;  // inner bevel ring; grid must sit inside this
 
@@ -304,20 +305,20 @@ $tray-bevel:    0.3rem;  // inner bevel ring; grid must sit inside this
     }
 
     #id_tray_handle {
-        width:  auto;  // full width of wrap
-        height: 48px;  // $handle-exposed — same exposed dimension as portrait
+        width:  auto;             // full width of wrap
+        height: $handle-exposed;  // same exposed dimension as portrait — scales w. rem
     }
 
     #id_tray_grip {
         // Rotate 90°: centred horizontally, extends vertically.
         // bottom mirrors portrait's left: grip starts at handle centre and extends
         // toward the tray (upward in column-reverse layout).
-        bottom: calc(48px / 2 - 0.125rem); // $handle-exposed / 2 from handle bottom
+        bottom: calc(#{$handle-exposed} / 2 - 0.125rem); // $handle-exposed / 2 from handle bottom
         top:    auto;
         left: 50%;
         transform: translateX(-50%);
-        width:  72px;     // $handle-rect-h — narrow visible dimension
-        height: 10000px;  // $handle-rect-w — extends upward into tray area
+        width:  $handle-rect-h;   // narrow visible dimension — scales w. rem
+        height: $handle-rect-w;   // extends upward into tray area
     }
 
     #id_tray {