fix: admin user details responsive layout

mobile/lib/widgets/settings/backup_settings/drift_backup_settings.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
@@ -9,7 +10,6 @@ import 'package:immich_mobile/domain/services/sync_linked_album.service.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
-import 'package:immich_mobile/generated/translations.g.dart';
 import 'package:immich_mobile/providers/background_sync.provider.dart';
 import 'package:immich_mobile/providers/backup/backup_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
@@ -255,11 +255,11 @@ class _BackupDelaySlider extends ConsumerWidget {
     _ => 600,
   };
 
-  static String formatBackupDelaySliderValue(BuildContext context, int v) => switch (v) {
-    0 => context.t.setting_notifications_notify_seconds(count: 5),
-    1 => context.t.setting_notifications_notify_seconds(count: 30),
-    2 => context.t.setting_notifications_notify_minutes(count: 2),
-    _ => context.t.setting_notifications_notify_minutes(count: 10),
+  static String formatBackupDelaySliderValue(int v) => switch (v) {
+    0 => 'setting_notifications_notify_seconds'.tr(namedArgs: {'count': '5'}),
+    1 => 'setting_notifications_notify_seconds'.tr(namedArgs: {'count': '30'}),
+    2 => 'setting_notifications_notify_minutes'.tr(namedArgs: {'count': '2'}),
+    _ => 'setting_notifications_notify_minutes'.tr(namedArgs: {'count': '10'}),
   };
 
   @override
@@ -272,8 +272,8 @@ class _BackupDelaySlider extends ConsumerWidget {
         Padding(
           padding: const EdgeInsets.only(left: 24.0, top: 8.0),
           child: Text(
-            context.t.backup_controller_page_background_delay(
-              duration: formatBackupDelaySliderValue(context, currentValue),
+            'backup_controller_page_background_delay'.tr(
+              namedArgs: {'duration': formatBackupDelaySliderValue(currentValue)},
             ),
             style: context.textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w500),
           ),
@@ -291,7 +291,7 @@ class _BackupDelaySlider extends ConsumerWidget {
           max: 3.0,
           min: 0.0,
           divisions: 3,
-          label: formatBackupDelaySliderValue(context, currentValue),
+          label: formatBackupDelaySliderValue(currentValue),
         ),
       ],
     );

web/src/lib/components/CalendarHeatmap.svelte

@@ -55,34 +55,36 @@
       {/each}
     </div> -->
 
-    <div class="grid grid-flow-col grid-rows-7 gap-0.5">
-      <div class="row-span-7 grid grid-rows-subgrid">
-        {#if Info.getStartOfWeek({ locale: $locale }) === 7}
-          <div></div>
-        {/if}
-        <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[0]}</Text></div>
-        <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[1]}</Text></div>
-        <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[2]}</Text></div>
-        {#if Info.getStartOfWeek({ locale: $locale }) === 1}
-          <div class="-my-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[3]}</Text></div>
-        {/if}
-      </div>
+    <div class="overflow-x-auto pb-1">
+      <div class="grid grid-flow-col grid-rows-7 gap-0.5">
+        <div class="row-span-7 grid grid-rows-subgrid">
+          {#if Info.getStartOfWeek({ locale: $locale }) === 7}
+            <div></div>
+          {/if}
+          <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[0]}</Text></div>
+          <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[1]}</Text></div>
+          <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[2]}</Text></div>
+          {#if Info.getStartOfWeek({ locale: $locale }) === 1}
+            <div class="-my-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[3]}</Text></div>
+          {/if}
+        </div>
 
-      {#each data.series as day, idx (day.date)}
-        {@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString(
-          { month: 'short', day: 'numeric' },
-          { locale: $locale },
-        )}
-        <div
-          class="aspect-square size-full rounded-sm {itemColors(day.count)} row-start-(--heatmap-row-start)"
-          style:--heatmap-row-start={idx === 0 ? padding + 1 : undefined}
-          title={itemLabel({ date, count: day.count })}
-          aria-label={itemLabel({ date, count: day.count })}
-        ></div>
-      {/each}
+        {#each data.series as day, idx (day.date)}
+          {@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString(
+            { month: 'short', day: 'numeric' },
+            { locale: $locale },
+          )}
+          <div
+            class="aspect-square size-full rounded-sm {itemColors(day.count)} row-start-(--heatmap-row-start)"
+            style:--heatmap-row-start={idx === 0 ? padding + 1 : undefined}
+            title={itemLabel({ date, count: day.count })}
+            aria-label={itemLabel({ date, count: day.count })}
+          ></div>
+        {/each}
+      </div>
     </div>
 
-    <div class="mt-2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+    <div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
       <span>{$t('less')}</span>
       <span class="size-3 rounded-sm bg-gray-200 dark:bg-gray-700"></span>
       <span class="size-3 rounded-sm bg-immich-primary/30"></span>

web/src/routes/admin/users/[id]/+layout.svelte

@@ -213,7 +213,7 @@
           </Stack>
         </AdminCard>
 
-        <div class="col-span-2 px-4 py-2">
+        <div class="col-span-full px-4 py-2">
           <div class="flex gap-2 text-primary">
             <Icon icon={mdiCloudUploadOutline} size="1.5rem" />
             <CardTitle>{$t('uploads')}</CardTitle>