feat(ui): make app header full-width and move Doctor into header controls

- Drop the fixed max-width on .header-container so the header spans the
  viewport while the card grid keeps its own content width
- Keep header icon click targets at 32px at all breakpoints and add
  role/tabindex/aria-label plus Enter/Space activation
- Relocate the Doctor trigger from the page toolbar to the header icon
  group (also available on the statistics page and in the hamburger
  menu), removing the now-unused .doctor-trigger styles
This commit is contained in:
Will Miao
2026-09-12 09:28:16 +08:00
parent 6d3f82976f
commit fe160134d0
5 changed files with 61 additions and 50 deletions
+22 -19
View File
@@ -12,7 +12,7 @@
}
.header-container {
max-width: 1400px;
max-width: none;
margin: 0 auto;
padding: 0 15px;
display: flex;
@@ -38,19 +38,6 @@
flex-shrink: 0;
}
/* Responsive header container for larger screens */
@media (min-width: 2150px) {
.header-container {
max-width: 1800px;
}
}
@media (min-width: 3000px) {
.header-container {
max-width: 2400px;
}
}
/* Logo and title styling */
.header-branding {
display: flex;
@@ -356,6 +343,27 @@
transform: translateY(-2px);
}
/* Doctor trigger in the header: accent-tinted icon with the status badge
pinned to the corner like the other header badges. */
.header-controls .doctor-toggle i {
color: var(--lora-accent);
}
.header-controls .doctor-toggle:hover i {
color: inherit;
}
.header-controls .doctor-status-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
border: 2px solid var(--card-bg);
}
.theme-toggle {
position: relative;
}
@@ -716,11 +724,6 @@
.header-controls {
gap: 6px;
}
.header-controls > div {
width: 30px;
height: 30px;
}
}
/* Responsive: Hide nav icons at 1100px to save space */