From 006d02cfaf7a8dcfb351fa52c027465cb204b2e0 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Tue, 6 Jan 2026 15:10:38 +0100
Subject: [PATCH] fix(web): server stats layout (#25085)

fix: server stats layout
---
 .../ServerStatisticsPanel.svelte              | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
index 319428c839..614b075cb8 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 { Heading, Icon } from '@immich/ui';
+  import { Code, Heading, Icon, Text } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -38,40 +38,40 @@
     <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">
-          <div class="flex place-items-center gap-4 text-primary">
+          <div class="flex flex-1 place-items-center gap-4 text-primary">
             <Icon icon={mdiCameraIris} size="25" />
-            <p class="uppercase">{$t('photos')}</p>
+            <Text fontWeight="bold" class="uppercase">{$t('photos')}</Text>
           </div>
 
           <div class="relative text-center font-mono text-2xl font-semibold">
-            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span class="text-primary"
+            <span class="text-gray-400 dark:text-gray-600">{zeros(stats.photos)}</span><span class="text-primary"
               >{stats.photos}</span
             >
           </div>
         </div>
         <div class="flex flex-wrap gap-x-12">
-          <div class="flex place-items-center gap-4 text-primary">
+          <div class="flex flex-1 place-items-center gap-4 text-primary">
             <Icon icon={mdiPlayCircle} size="25" />
-            <p class="uppercase">{$t('videos')}</p>
+            <Text fontWeight="bold" class="uppercase">{$t('videos')}</Text>
           </div>
 
           <div class="relative text-center font-mono text-2xl font-semibold">
-            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span class="text-primary"
+            <span class="text-gray-400 dark:text-gray-600">{zeros(stats.videos)}</span><span class="text-primary"
               >{stats.videos}</span
             >
           </div>
         </div>
-        <div class="flex flex-wrap gap-x-7">
-          <div class="flex place-items-center gap-4 text-primary">
+        <div class="flex flex-wrap gap-x-5">
+          <div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
             <Icon icon={mdiChartPie} size="25" />
-            <p class="uppercase">{$t('storage')}</p>
+            <Text fontWeight="bold" class="uppercase">{$t('storage')}</Text>
           </div>
 
           <div class="relative flex text-center font-mono text-2xl font-semibold">
-            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span class="text-primary"
+            <span class="text-gray-400 dark:text-gray-600">{zeros(statsUsage)}</span><span class="text-primary"
               >{statsUsage}</span
             >
-            <span class="my-auto ms-2 text-center text-base font-light text-gray-400">{statsUsageUnit}</span>
+            <Code color="muted" class="font-light">{statsUsageUnit}</Code>
           </div>
         </div>
       </div>