diff --git a/admin-web/src/styles.css b/admin-web/src/styles.css index c03bf3d..302baf2 100644 --- a/admin-web/src/styles.css +++ b/admin-web/src/styles.css @@ -191,6 +191,8 @@ h2 { wa-button.button--wide { display: block; + min-width: 0; + max-width: 100%; } .button--small { @@ -276,6 +278,7 @@ wa-button.logout-button::part(button) { .auth-card { width: min(100%, 460px); + min-width: 0; padding: clamp(30px, 5vw, 52px); border: 1px solid var(--border); border-radius: 20px; @@ -284,12 +287,21 @@ wa-button.logout-button::part(button) { .form-stack { display: grid; + min-width: 0; margin-top: 30px; + grid-template-columns: minmax(0, 1fr); gap: 18px; } +.form-stack > * { + min-width: 0; +} + wa-input { + display: block; width: 100%; + min-width: 0; + max-width: 100%; } wa-input::part(form-control-label) { @@ -434,14 +446,19 @@ wa-input.totp-input::part(input) { } .nav-list a:hover, -.nav-list a.active { +.nav-list a:focus-visible { color: var(--navy); background: var(--hover-fill); } .nav-list a.active { color: var(--primary); - box-shadow: inset 3px 0 var(--primary); + background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted)); + font-weight: 700; +} + +.nav-list a.active:hover { + background: color-mix(in srgb, var(--primary) 16%, var(--surface-muted)); } .nav-icon { @@ -544,6 +561,9 @@ wa-button.logout-button::part(button) { } .page-stage { + display: grid; + align-content: start; + gap: 20px; animation: pageIn 180ms ease-out; } @@ -556,7 +576,7 @@ wa-button.logout-button::part(button) { .page-heading { display: flex; - margin-bottom: 28px; + margin-bottom: 8px; align-items: end; justify-content: space-between; gap: 24px; @@ -634,7 +654,6 @@ wa-button.logout-button::part(button) { .metric-grid { display: grid; - margin-bottom: 22px; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 16px; } @@ -923,12 +942,14 @@ td strong { display: flex; max-width: 760px; margin-bottom: 24px; + align-items: center; gap: 10px; } .search-box { position: relative; display: block; + min-width: 0; flex: 1; } @@ -942,7 +963,13 @@ td strong { } .search-box input { + display: block; padding-left: 42px; + margin: 0; +} + +.search-form > wa-button { + flex: 0 0 auto; } .empty-state {