From 57fca378bc26afc38491b4d0d75fb86279235df4 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Mon, 5 Jan 2026 10:44:29 -0500
Subject: [PATCH] refactor: page container (#25038)

---
 .../ServerStatisticsPanel.svelte              | 11 +++---
 web/src/routes/admin/queues/+page.svelte      | 14 ++++----
 .../routes/admin/server-status/+page.svelte   |  9 +++--
 .../routes/admin/system-settings/+page.svelte | 34 +++++++++----------
 4 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
index 1fc01faf9c..319428c839 100644
--- a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
+++ b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
@@ -3,7 +3,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
   import type { ServerStatsResponseDto } from '@immich/sdk';
-  import { Icon } from '@immich/ui';
+  import { Heading, Icon } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -25,15 +25,16 @@
   let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(stats.usage, stats.usage > TiB ? 2 : 0));
 </script>
 
-<div class="flex flex-col gap-5">
+<div class="flex flex-col gap-5 my-4">
   <div>
-    <p class="text-sm dark:text-immich-dark-fg uppercase">{$t('total_usage')}</p>
+    <Heading size="tiny" class="mb-2">{$t('total_usage')}</Heading>
 
-    <div class="mt-5 hidden justify-between lg:flex gap-4">
+    <div class="hidden justify-between lg:flex gap-4">
       <StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
       <StatsCard icon={mdiPlayCircle} title={$t('videos')} value={stats.videos} />
       <StatsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
     </div>
+
     <div class="mt-5 flex lg:hidden">
       <div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
         <div class="flex flex-wrap gap-x-12">
@@ -78,7 +79,7 @@
   </div>
 
   <div>
-    <p class="text-sm dark:text-immich-dark-fg uppercase">{$t('user_usage_detail')}</p>
+    <Heading size="tiny" class="mb-2">{$t('user_usage_detail')}</Heading>
     <table class="mt-5 w-full text-start">
       <thead
         class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
diff --git a/web/src/routes/admin/queues/+page.svelte b/web/src/routes/admin/queues/+page.svelte
index 39cdb1e80e..395ec5f688 100644
--- a/web/src/routes/admin/queues/+page.svelte
+++ b/web/src/routes/admin/queues/+page.svelte
@@ -5,7 +5,7 @@
   import { queueManager } from '$lib/managers/queue-manager.svelte';
   import { getQueuesActions } from '$lib/services/queue.service';
   import { type QueueResponseDto } from '@immich/sdk';
-  import { CommandPaletteContext, type ActionItem } from '@immich/ui';
+  import { CommandPaletteContext, Container, type ActionItem } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -38,11 +38,9 @@
 <OnEvents {onQueueUpdate} />
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ResumePaused, CreateJob, ManageConcurrency]}>
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
-      {#if queues}
-        <JobsPanel {queues} />
-      {/if}
-    </section>
-  </section>
+  <Container size="medium" center>
+    {#if queues}
+      <JobsPanel {queues} />
+    {/if}
+  </Container>
 </AdminPageLayout>
diff --git a/web/src/routes/admin/server-status/+page.svelte b/web/src/routes/admin/server-status/+page.svelte
index 31b193d952..b5703cf963 100644
--- a/web/src/routes/admin/server-status/+page.svelte
+++ b/web/src/routes/admin/server-status/+page.svelte
@@ -2,6 +2,7 @@
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import ServerStatisticsPanel from '$lib/components/server-statistics/ServerStatisticsPanel.svelte';
   import { getServerStatistics } from '@immich/sdk';
+  import { Container } from '@immich/ui';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
 
@@ -25,9 +26,7 @@
 </script>
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
-      <ServerStatisticsPanel {stats} />
-    </section>
-  </section>
+  <Container size="large" center>
+    <ServerStatisticsPanel {stats} />
+  </Container>
 </AdminPageLayout>
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index 3f762d02f5..4a8987708e 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -26,7 +26,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { getSystemConfigActions } from '$lib/services/system-config.service';
-  import { Alert, CommandPaletteContext } from '@immich/ui';
+  import { Alert, CommandPaletteContext, Container } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
@@ -217,21 +217,19 @@
 <CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
-  <section id="setting-content" class="flex place-content-center sm:mx-4 mt-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
-      {#if featureFlagsManager.value.configFile}
-        <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
-      {/if}
-      <div>
-        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-      </div>
-      <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-        {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
-          <SettingAccordion {title} {subtitle} {key} {icon}>
-            <Component />
-          </SettingAccordion>
-        {/each}
-      </SettingAccordionState>
-    </section>
-  </section>
+  <Container size="large" center>
+    {#if featureFlagsManager.value.configFile}
+      <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
+    {/if}
+    <div>
+      <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+    </div>
+    <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+      {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
+        <SettingAccordion {title} {subtitle} {key} {icon}>
+          <Component />
+        </SettingAccordion>
+      {/each}
+    </SettingAccordionState>
+  </Container>
 </AdminPageLayout>