refactor: page container (#25038)

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>

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>

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>