michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Shell: draw the bottom resize handle like the corner ones

Browse Source 
It was a filled rounded pill among two corner brackets drawn as 2px lines —
three marks along the same edge in two different languages. Now it is a 2px
line in currentColor on the same 4px inset, with the same muted-to-text
hover, so the bottom edge reads as one set.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-11 18:45:20 -04:00
co-authored by Claude Opus 5
parent fb66d56f7d
commit 804dc483d6
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+8 -10
View File
@@ -435,8 +435,9 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
border-radius: 0 0 0 3px; border-radius: 0 0 0 3px;
} }
/* bottom-edge pill: drag to move the tile's bottom edge (height only); /* bottom edge: drag to move the tile's bottom edge (height only). Drawn as
sits between the two corner handles */ the same 2px line as the corner handles it sits between, on the same
4px inset, so the three read as one set of marks along the bottom. */
.tile-resize-bottom { .tile-resize-bottom {
position: absolute; position: absolute;
left: 24px; left: 24px;
@@ -449,6 +450,7 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
justify-content: center; justify-content: center;
cursor: ns-resize; cursor: ns-resize;
touch-action: none; touch-action: none;
color: var(--muted);
opacity: 0; opacity: 0;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
} }
@@ -456,17 +458,13 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
content: ""; content: "";
width: 44px; width: 44px;
max-width: 60%; max-width: 60%;
height: 5px; height: 0;
margin-bottom: 2px; margin-bottom: 4px;
border-radius: 999px; border-bottom: 2px solid currentColor;
background: var(--muted);
transition: background 0.15s ease;
} }
.tile:hover .tile-resize-bottom { opacity: 0.6; } .tile:hover .tile-resize-bottom { opacity: 0.6; }
.tile .tile-resize-bottom:hover, .tile .tile-resize-bottom:hover,
.tile.resizing .tile-resize-bottom { opacity: 1; } .tile.resizing .tile-resize-bottom { opacity: 1; color: var(--text); }
.tile .tile-resize-bottom:hover::after,
.tile.resizing .tile-resize-bottom::after { background: var(--text); }
/* ── seam divider between adjacent tiles ───────────────────────────── */ /* ── seam divider between adjacent tiles ───────────────────────────── */