feat(web): one control geometry for buttons and chips

Buttons, chips, toggles and the search input converge on --control-h
2rem with --text-xs shared, and .control becomes an inline-flex so
anchor text centres in the title-detail action bar. Chip colour is
untouched (#165 owns it). Verified in agent-browser at 1440px, 46rem
and 40rem; the release deck keeps its column widths and does not
scroll horizontally.
This commit is contained in:
Miguel Palhas
2026-08-24 12:11:08 +01:00
parent 2495895717
commit 1a4394cf0d
2 changed files with 13 additions and 11 deletions
+10 -8
View File
@@ -94,6 +94,7 @@
--space-12: 3rem;
--radius: 4px;
--control-h: 2rem;
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}
@@ -442,10 +443,13 @@ body {
/* ---- controls -------------------------------------------------------- */
.control {
min-height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-h);
padding: 0 var(--space-4);
font-family: var(--font-readout);
font-size: var(--text-sm);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
@@ -497,7 +501,7 @@ body {
.search-input {
width: 100%;
min-height: 2.75rem;
min-height: var(--control-h);
padding: 0 var(--space-8) 0 var(--space-3);
color: var(--ink);
background: var(--ground);
@@ -634,7 +638,7 @@ body {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 1.375rem;
min-height: var(--control-h);
padding: 0 var(--space-2);
background: var(--panel-raised);
border: 1px solid var(--line);
@@ -996,7 +1000,7 @@ body {
.bucket-toggle {
margin-left: auto;
min-height: 2.75rem;
min-height: var(--control-h);
padding: 0 var(--space-2);
font-size: var(--text-xs);
text-transform: uppercase;
@@ -1175,7 +1179,7 @@ body {
}
.view-btn {
min-height: 1.75rem;
min-height: var(--control-h);
padding: 0 var(--space-2);
font-family: var(--font-readout);
font-size: var(--text-xs);
@@ -1373,7 +1377,6 @@ body {
/* the tracked toggle reads as the rule it is; pressed = on */
.season-line .control,
.ep-actions .control {
min-height: 2.25rem;
padding: 0 var(--space-3);
}
@@ -1654,7 +1657,6 @@ body {
}
.movie-controls .control {
min-height: 2.25rem;
padding: 0 var(--space-3);
}