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

static/css/components/header.css

@@ -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 */

static/css/components/modal/doctor-modal.css

@@ -1,13 +1,3 @@
-.doctor-trigger {
-    min-width: 120px;
-    position: relative;
-    border-color: color-mix(in srgb, var(--lora-accent) 24%, var(--border-color));
-}
-
-.doctor-trigger i {
-    color: var(--lora-accent);
-}
-
 .doctor-status-badge {
     display: inline-flex;
     align-items: center;
@@ -247,15 +237,6 @@
 }
 
 @media (max-width: 760px) {
-    .doctor-trigger {
-        min-width: auto;
-        padding-inline: 10px;
-    }
-
-    .doctor-trigger span:not(.doctor-status-badge) {
-        display: none;
-    }
-
     .doctor-hero,
     .doctor-footer {
         flex-direction: column;

static/js/components/Header.js

@@ -49,6 +49,18 @@ export class HeaderManager {
     initializeCommonElements() {
       this.initializeThemePopover();
 
+      // Header icon buttons are divs with role="button"; make Enter/Space activate them
+      const headerControls = document.getElementById('headerControls');
+      if (headerControls) {
+        headerControls.addEventListener('keydown', (e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return;
+          const target = e.target.closest('[role="button"]');
+          if (!target || !headerControls.contains(target)) return;
+          e.preventDefault();
+          target.click();
+        });
+      }
+
       const settingsToggle = document.querySelector('.settings-toggle');
       if (settingsToggle) {
         settingsToggle.addEventListener('click', () => {
@@ -295,6 +307,13 @@ export class HeaderManager {
         case 'notifications':
           updateService.toggleUpdateModal();
           break;
+        case 'doctor': {
+          const doctorToggle = document.getElementById('doctorTriggerBtn');
+          if (doctorToggle) {
+            doctorToggle.click();
+          }
+          break;
+        }
         case 'support':
           if (window.modalManager) {
             window.modalManager.toggleModal('supportModal');

templates/components/controls.html

@@ -144,13 +144,6 @@
                 </button>
             </div>
             {% endif %}
-            <div class="control-group doctor-control-group">
-                <button id="doctorTriggerBtn" class="doctor-trigger" title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}">
-                    <i class="fas fa-stethoscope"></i>
-                    <span>{{ t('doctor.title', default='Doctor') }}</span>
-                    <span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
-                </button>
-            </div>
         </div>
     </div>
 </div>

templates/components/header.html

@@ -68,23 +68,34 @@
     <!-- Right section: Controls -->
     <div class="header-right">
       <div class="header-controls" id="headerControls">
-        <div class="theme-toggle" title="{{ t('header.theme.toggle') }}">
+        <div class="doctor-toggle" id="doctorTriggerBtn" role="button" tabindex="0"
+          title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}"
+          aria-label="{{ t('doctor.title', default='Doctor') }}">
+          <i class="fas fa-stethoscope"></i>
+          <span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
+        </div>
+        <div class="theme-toggle" role="button" tabindex="0" title="{{ t('header.theme.toggle') }}"
+          aria-label="{{ t('header.theme.toggle') }}">
           <i class="fas fa-moon dark-icon"></i>
           <i class="fas fa-sun light-icon"></i>
           <i class="fas fa-adjust auto-icon"></i>
         </div>
-        <div class="settings-toggle" title="{{ t('common.actions.settings') }}">
+        <div class="settings-toggle" role="button" tabindex="0" title="{{ t('common.actions.settings') }}"
+          aria-label="{{ t('common.actions.settings') }}">
           <i class="fas fa-cog"></i>
         </div>
-        <div class="help-toggle" id="helpToggleBtn" title="{{ t('common.actions.help') }}">
+        <div class="help-toggle" id="helpToggleBtn" role="button" tabindex="0" title="{{ t('common.actions.help') }}"
+          aria-label="{{ t('common.actions.help') }}">
           <i class="fas fa-question-circle"></i>
           <span class="update-badge"></span>
         </div>
-        <div class="update-toggle" id="updateToggleBtn" title="{{ t('header.actions.notifications') }}">
+        <div class="update-toggle" id="updateToggleBtn" role="button" tabindex="0"
+          title="{{ t('header.actions.notifications') }}" aria-label="{{ t('header.actions.notifications') }}">
           <i class="fas fa-bell"></i>
           <span class="update-badge"></span>
         </div>
-        <div class="support-toggle" id="supportToggleBtn" title="{{ t('header.actions.support') }}">
+        <div class="support-toggle" id="supportToggleBtn" role="button" tabindex="0"
+          title="{{ t('header.actions.support') }}" aria-label="{{ t('header.actions.support') }}">
           <i class="fas fa-heart"></i>
         </div>
       </div>
@@ -110,6 +121,10 @@
           <i class="fas fa-bell"></i>
           <span>{{ t('header.actions.notifications') }}</span>
         </div>
+        <div class="dropdown-item" data-action="doctor">
+          <i class="fas fa-stethoscope"></i>
+          <span>{{ t('doctor.title', default='Doctor') }}</span>
+        </div>
         <div class="dropdown-divider"></div>
         <div class="dropdown-item" data-action="support">
           <i class="fas fa-heart"></i>