fix(web): align mobile header identity and update actions

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 and update action, with array usage below the name.
  */
 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,10 +229,19 @@ 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);
-    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);
@@ -245,9 +254,7 @@ const copyLanIp = async () => {
   }
 
   .uh-nav-right {
-    grid-column: 2;
-    grid-row: 2;
-    width: 100%;
+    display: contents;
   }
 
   .uh-logo {
@@ -259,6 +266,11 @@ const copyLanIp = async () => {
   }
 
   .uh-actions {
+    position: relative;
+    z-index: 10;
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: end;
     column-gap: 0;
   }
 
@@ -274,37 +286,59 @@ const copyLanIp = async () => {
   }
 
   .uh-name {
-    flex: 1;
+    z-index: 10;
+    grid-column: 2;
+    grid-row: 3;
+    align-self: baseline;
+    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 {
-    grid-column: 1 / -1;
-    grid-row: 3;
+    z-index: 10;
+    display: flex;
+    grid-column: 1;
+    grid-row: 3 / span 2;
+    align-self: baseline;
+    max-width: 100%;
     top: auto;
   }
 
-  .uh-meta-right {
-    display: contents;
+  .uh-version :deep(.header-version) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .uh-version :deep(.header-update-status) {
+    min-width: 0;
+    max-width: 100%;
   }
 
-  .uh-server-status,
   .uh-array-usage {
-    position: relative;
-    z-index: 10;
+    grid-row: 4;
   }
 
-  .uh-server-status {
-    grid-column: 1 / -1;
-    grid-row: 1;
+  .uh-meta-right {
+    display: contents;
   }
 
-  .uh-array-usage {
+  .uh-server-status {
+    position: relative;
+    z-index: 10;
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: 1;
   }
 
   .uh-meta-right,
+  .uh-array-usage,
   .uh-version {
     --color-header-text-secondary: var(--color-header-text-primary);
   }

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"

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,
     };
   }
 
@@ -153,7 +155,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 }" />
@@ -245,16 +247,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>

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",

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: {