From 945d0de3a58f33e657955de6a305cc70663cb558 Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Tue, 13 Oct 2026 11:36:48 -0400
Subject: [PATCH 1/5] fix(web): place mobile server name beside OS version

---
 web/src/components/Header.standalone.vue    | 44 ++++++++++++++++-----
 web/src/components/Header/HeaderVersion.vue |  2 +-
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/web/src/components/Header.standalone.vue b/web/src/components/Header.standalone.vue
index d68978cb24..123bc0792f 100644
--- a/web/src/components/Header.standalone.vue
+++ b/web/src/components/Header.standalone.vue
@@ -29,8 +29,8 @@ import { useThemeStore } from '~/store/theme';
  * multi-component header (`unraid-header-os-version` + `unraid-user-profile`) is
  * rendered instead.
  *
- * A single grid keeps stateful controls mounted once. On mobile the version and
- * update notice span the header width instead of competing with account actions.
+ * A single grid keeps stateful controls mounted once. On mobile the server name
+ * sits beside the version, with update notices on a separate full-width row.
  */
 export interface Props {
   server?: Server | string;
@@ -245,9 +245,7 @@ const copyLanIp = async () => {
   }
 
   .uh-nav-right {
-    grid-column: 2;
-    grid-row: 2;
-    width: 100%;
+    display: contents;
   }
 
   .uh-logo {
@@ -259,6 +257,11 @@ const copyLanIp = async () => {
   }
 
   .uh-actions {
+    position: relative;
+    z-index: 10;
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: end;
     column-gap: 0;
   }
 
@@ -274,14 +277,37 @@ const copyLanIp = async () => {
   }
 
   .uh-name {
-    flex: 1;
+    z-index: 10;
+    grid-column: 2;
+    grid-row: 3;
+    align-self: center;
+    justify-self: end;
+    max-width: 100%;
     justify-content: flex-end;
   }
 
   .uh-version {
-    grid-column: 1 / -1;
+    display: contents;
+  }
+
+  .uh-version :deep(.header-version) {
+    display: contents;
+  }
+
+  .uh-version :deep(.header-version-trigger) {
+    position: relative;
+    z-index: 10;
+    grid-column: 1;
     grid-row: 3;
-    top: auto;
+    align-self: center;
+    justify-self: start;
+  }
+
+  .uh-version :deep(.header-update-status) {
+    position: relative;
+    z-index: 10;
+    grid-column: 1 / -1;
+    grid-row: 4;
   }
 
   .uh-meta-right {
@@ -301,7 +327,7 @@ const copyLanIp = async () => {
 
   .uh-array-usage {
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: auto;
   }
 
   .uh-meta-right,
diff --git a/web/src/components/Header/HeaderVersion.vue b/web/src/components/Header/HeaderVersion.vue
index 9f9d327007..814c1de40b 100644
--- a/web/src/components/Header/HeaderVersion.vue
+++ b/web/src/components/Header/HeaderVersion.vue
@@ -153,7 +153,7 @@ const updateOsStatus = computed(() => {
       <DropdownMenuTrigger as-child>
         <Button
           variant="link"
-          class="xs:text-sm text-header-text-secondary hover:text-orange-dark focus:text-orange-dark flex h-auto flex-row items-center gap-x-1 p-0 text-xs leading-none font-semibold hover:underline focus:underline"
+          class="header-version-trigger xs:text-sm text-header-text-secondary hover:text-orange-dark focus:text-orange-dark flex h-auto flex-row items-center gap-x-1 p-0 text-xs leading-none font-semibold hover:underline focus:underline"
           :title="t('headerOsVersion.versionInformation')"
         >
           <InformationCircleIcon :style="{ width: '12px', height: '12px', flexShrink: 0 }" />

From e56e775f26a62d288822af8e70e4d4aee8cb66d4 Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Tue, 13 Oct 2026 12:14:07 -0400
Subject: [PATCH 2/5] fix(web): refine mobile header rows and preserve update
 badge padding

---
 web/src/components/Header.standalone.vue    | 47 +++++++++++++++------
 web/src/components/Header/ArrayUsage.vue    | 11 ++++-
 web/src/components/Header/HeaderVersion.vue | 11 ++---
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/web/src/components/Header.standalone.vue b/web/src/components/Header.standalone.vue
index 123bc0792f..054a06b68c 100644
--- a/web/src/components/Header.standalone.vue
+++ b/web/src/components/Header.standalone.vue
@@ -30,7 +30,7 @@ import { useThemeStore } from '~/store/theme';
  * rendered instead.
  *
  * A single grid keeps stateful controls mounted once. On mobile the server name
- * sits beside the version, with update notices on a separate full-width row.
+ * sits beside the update notice, or the version when no notice is present.
  */
 export interface Props {
   server?: Server | string;
@@ -98,7 +98,6 @@ const copyLanIp = async () => {
       class="uh-meta-right relative z-10 flex max-w-full min-w-0 flex-col items-end gap-y-1 text-end"
       :class="{ 'uh-meta-over-banner': hasBanner }"
     >
-      <ArrayUsage v-if="showArrayUsage" class="uh-array-usage" />
       <!--
         Below sm the meta row becomes a full-width top strip so the uptime and
         registration state split to opposite ends (uptime left, state right)
@@ -117,6 +116,7 @@ const copyLanIp = async () => {
         <HeaderVersion />
       </div>
     </div>
+    <ArrayUsage v-if="showArrayUsage" compact class="uh-array-usage" />
 
     <div class="uh-nav-right relative z-10 flex min-w-0 flex-row items-center justify-end gap-x-1">
       <div
@@ -229,6 +229,15 @@ const copyLanIp = async () => {
   column-gap: calc(var(--spacing) * 2);
 }
 
+.uh-array-usage {
+  position: relative;
+  z-index: 10;
+  grid-column: 2;
+  grid-row: 3;
+  justify-self: end;
+  width: calc(var(--spacing) * 24);
+}
+
 @media (max-width: 639.98px) {
   .unraid-header-shell {
     --uh-header-inset: calc(var(--spacing) * 2);
@@ -284,6 +293,12 @@ const copyLanIp = async () => {
     justify-self: end;
     max-width: 100%;
     justify-content: flex-end;
+    font-size: var(--text-sm);
+  }
+
+  .uh-name > span,
+  .uh-name :deep(button) {
+    font-size: inherit;
   }
 
   .uh-version {
@@ -306,31 +321,37 @@ const copyLanIp = async () => {
   .uh-version :deep(.header-update-status) {
     position: relative;
     z-index: 10;
-    grid-column: 1 / -1;
+    grid-column: 1;
     grid-row: 4;
+    min-width: 0;
+    max-width: 100%;
   }
 
-  .uh-meta-right {
-    display: contents;
+  .unraid-header-shell:has(.header-update-status) .uh-name {
+    grid-row: 4;
   }
 
-  .uh-server-status,
   .uh-array-usage {
-    position: relative;
-    z-index: 10;
+    grid-row: 4;
   }
 
-  .uh-server-status {
-    grid-column: 1 / -1;
-    grid-row: 1;
+  .unraid-header-shell:has(.header-update-status) .uh-array-usage {
+    grid-row: 5;
   }
 
-  .uh-array-usage {
+  .uh-meta-right {
+    display: contents;
+  }
+
+  .uh-server-status {
+    position: relative;
+    z-index: 10;
     grid-column: 1 / -1;
-    grid-row: auto;
+    grid-row: 1;
   }
 
   .uh-meta-right,
+  .uh-array-usage,
   .uh-version {
     --color-header-text-secondary: var(--color-header-text-primary);
   }
diff --git a/web/src/components/Header/ArrayUsage.vue b/web/src/components/Header/ArrayUsage.vue
index 05602d1414..9ae297af05 100644
--- a/web/src/components/Header/ArrayUsage.vue
+++ b/web/src/components/Header/ArrayUsage.vue
@@ -12,6 +12,7 @@ import { ARRAY_CAPACITY_QUERY } from '~/components/Header/arrayCapacity.query';
  * self-contained within the header web component.
  */
 const { t } = useI18n();
+const { compact = false } = defineProps<{ compact?: boolean }>();
 
 // Match the legacy `usage_color()` thresholds (utilization %). The webgui allows
 // per-array overrides via display settings; those are not exposed over GraphQL yet,
@@ -47,7 +48,12 @@ const hasData = computed(() => array.value != null);
 <template>
   <div
     v-if="hasData"
-    class="flex w-full items-center gap-x-2 gap-y-0.5 sm:w-40 sm:flex-col sm:items-stretch"
+    class="flex gap-x-2 gap-y-0.5"
+    :class="
+      compact
+        ? 'w-32 max-w-full shrink-0 items-center'
+        : 'w-full items-center sm:w-40 sm:flex-col sm:items-stretch'
+    "
     :title="started ? t('headerArrayUsage.usedOfArray', [usedPercent]) : undefined"
   >
     <div
@@ -57,7 +63,8 @@ const hasData = computed(() => array.value != null);
       <span v-if="started" class="font-semibold">{{ usedPercent }}%</span>
     </div>
     <div
-      class="bg-header-text-secondary/20 h-1.5 min-w-0 flex-1 overflow-hidden rounded-full sm:w-full sm:flex-none"
+      class="bg-header-text-secondary/20 h-1.5 min-w-0 flex-1 overflow-hidden rounded-full"
+      :class="{ 'sm:w-full sm:flex-none': !compact }"
     >
       <div
         v-if="started"
diff --git a/web/src/components/Header/HeaderVersion.vue b/web/src/components/Header/HeaderVersion.vue
index 814c1de40b..a364a61b97 100644
--- a/web/src/components/Header/HeaderVersion.vue
+++ b/web/src/components/Header/HeaderVersion.vue
@@ -245,16 +245,17 @@ const updateOsStatus = computed(() => {
 </template>
 
 <style scoped>
+.header-update-status {
+  width: fit-content;
+  padding-block: var(--spacing);
+  padding-inline: calc(var(--spacing) * 3);
+}
+
 @media (max-width: 639.98px) {
   .header-version {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     width: 100%;
   }
-
-  .header-update-status {
-    width: fit-content;
-    padding-inline: calc(var(--spacing) * 3);
-  }
 }
 </style>

From 4ee43d024f104bbd5625f8f704d5c54a96b1f35d Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Tue, 13 Oct 2026 13:04:06 -0400
Subject: [PATCH 3/5] fix(web): shorten header reboot action label

---
 web/src/components/Header/HeaderVersion.vue | 4 +++-
 web/src/locales/en.json                     | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Header/HeaderVersion.vue b/web/src/components/Header/HeaderVersion.vue
index a364a61b97..da54560108 100644
--- a/web/src/components/Header/HeaderVersion.vue
+++ b/web/src/components/Header/HeaderVersion.vue
@@ -121,7 +121,9 @@ const updateOsStatus = computed(() => {
           rebootType.value === 'thirdPartyDriversDownloading' ? ArrowPathIcon : ExclamationTriangleIcon,
       },
       href: rebootType.value === 'downgrade' ? WEBGUI_TOOLS_DOWNGRADE : WEBGUI_TOOLS_UPDATE,
-      text: t(rebootTypeText.value),
+      text:
+        rebootType.value === 'update' ? t('headerOsVersion.rebootToUpdate') : t(rebootTypeText.value),
+      title: rebootTypeText.value,
     };
   }
 
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 0214592618..d27caecf56 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -424,6 +424,7 @@
   "headerArrayUsage.usedOfArray": "{0}% of array used",
   "headerOsVersion.apiVersionCopiedToClipboard": "API version copied to clipboard",
   "headerOsVersion.osVersionCopiedToClipboard": "OS version copied to clipboard",
+  "headerOsVersion.rebootToUpdate": "Reboot to Update",
   "headerOsVersion.unraidApi": "Unraid API",
   "headerOsVersion.unraidOs": "Unraid OS",
   "headerOsVersion.unraidOsReleased": "Unraid OS {0} Released",

From 9329c76f384998604887681ffcceb444b2956167 Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Tue, 13 Oct 2026 13:16:59 -0400
Subject: [PATCH 4/5] fix(web): align mobile version and reboot actions

---
 web/src/components/Header.standalone.vue | 37 ++++++++----------------
 web/test-pages/combined-header.js        |  2 +-
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/web/src/components/Header.standalone.vue b/web/src/components/Header.standalone.vue
index 054a06b68c..800325ca85 100644
--- a/web/src/components/Header.standalone.vue
+++ b/web/src/components/Header.standalone.vue
@@ -30,7 +30,7 @@ import { useThemeStore } from '~/store/theme';
  * rendered instead.
  *
  * A single grid keeps stateful controls mounted once. On mobile the server name
- * sits beside the update notice, or the version when no notice is present.
+ * sits beside the version and update action, with array usage below the name.
  */
 export interface Props {
   server?: Server | string;
@@ -241,7 +241,7 @@ const copyLanIp = async () => {
 @media (max-width: 639.98px) {
   .unraid-header-shell {
     --uh-header-inset: calc(var(--spacing) * 2);
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: fit-content(60vw) minmax(0, 1fr);
     grid-template-rows: auto auto auto;
     column-gap: var(--spacing);
     row-gap: var(--spacing);
@@ -289,7 +289,7 @@ const copyLanIp = async () => {
     z-index: 10;
     grid-column: 2;
     grid-row: 3;
-    align-self: center;
+    align-self: end;
     justify-self: end;
     max-width: 100%;
     justify-content: flex-end;
@@ -302,43 +302,30 @@ const copyLanIp = async () => {
   }
 
   .uh-version {
-    display: contents;
-  }
-
-  .uh-version :deep(.header-version) {
-    display: contents;
-  }
-
-  .uh-version :deep(.header-version-trigger) {
-    position: relative;
     z-index: 10;
+    display: flex;
     grid-column: 1;
     grid-row: 3;
     align-self: center;
-    justify-self: start;
+    max-width: 100%;
+    top: auto;
+  }
+
+  .uh-version :deep(.header-version) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
   }
 
   .uh-version :deep(.header-update-status) {
-    position: relative;
-    z-index: 10;
-    grid-column: 1;
-    grid-row: 4;
     min-width: 0;
     max-width: 100%;
   }
 
-  .unraid-header-shell:has(.header-update-status) .uh-name {
-    grid-row: 4;
-  }
-
   .uh-array-usage {
     grid-row: 4;
   }
 
-  .unraid-header-shell:has(.header-update-status) .uh-array-usage {
-    grid-row: 5;
-  }
-
   .uh-meta-right {
     display: contents;
   }
diff --git a/web/test-pages/combined-header.js b/web/test-pages/combined-header.js
index 143e59c1b0..db5a69b701 100644
--- a/web/test-pages/combined-header.js
+++ b/web/test-pages/combined-header.js
@@ -49,7 +49,7 @@ const client = new ApolloClient({
           info: {
             id: 'preview-info',
             primaryNetwork: null,
-            os: { id: 'preview-os', hostname: 'Tower' },
+            os: { id: 'preview-os', hostname: server.name },
             versions: { id: 'preview-versions', core: { unraid: '7.4.0-beta.3', api: '4.37.5' } },
           },
           notifications: {

From e6a0a6c73ade1b35b0f5627783bf38d3ff0228c7 Mon Sep 17 00:00:00 2001
From: Eli Bosley <eli@bosley.dev>
Date: Tue, 13 Oct 2026 13:24:34 -0400
Subject: [PATCH 5/5] fix(web): keep mobile server name aligned with version

---
 web/src/components/Header.standalone.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Header.standalone.vue b/web/src/components/Header.standalone.vue
index 800325ca85..b04f17a59b 100644
--- a/web/src/components/Header.standalone.vue
+++ b/web/src/components/Header.standalone.vue
@@ -289,7 +289,7 @@ const copyLanIp = async () => {
     z-index: 10;
     grid-column: 2;
     grid-row: 3;
-    align-self: end;
+    align-self: baseline;
     justify-self: end;
     max-width: 100%;
     justify-content: flex-end;
@@ -305,8 +305,8 @@ const copyLanIp = async () => {
     z-index: 10;
     display: flex;
     grid-column: 1;
-    grid-row: 3;
-    align-self: center;
+    grid-row: 3 / span 2;
+    align-self: baseline;
     max-width: 100%;
     top: auto;
   }