[fix](trx-frontend): improve spectrum resize interaction

Make the spectrum resize grip easier to use and style it closer to\nexisting controls.\n\nKeep auto-max behavior by default while allowing manual drag to\nresize beyond viewport fill, enforcing only the minimum height.\n\nCo-authored-by: Codex <codex@openai.com>

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-05 18:08:16 +01:00
parent a905fa9678
commit 4c69e2bcde
2 changed files with 19 additions and 13 deletions
@@ -2191,24 +2191,28 @@ button:focus-visible, input:focus-visible, select:focus-visible {
}
#spectrum-size-grip {
position: relative;
height: 0.9rem;
margin-top: 0.1rem;
margin-bottom: 0.3rem;
height: 1.1rem;
margin: 0.18rem 0 0.42rem;
cursor: ns-resize;
touch-action: none;
border-radius: 999px;
}
#spectrum-size-grip::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 3.8rem;
height: 0.26rem;
width: 4.2rem;
height: 0.3rem;
transform: translate(-50%, -50%);
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
background: color-mix(in srgb, var(--btn-bg) 78%, transparent);
}
#spectrum-size-grip:hover::before {
border-color: color-mix(in srgb, var(--accent-yellow) 55%, var(--border-light));
background: color-mix(in srgb, var(--accent-yellow) 22%, var(--btn-bg));
}
#spectrum-freq-axis span {
position: absolute;
transform: translateX(-50%);