fix: admin user details responsive layout (#30114)

This commit is contained in:
Yaros
2026-07-22 10:54:26 +02:00
committed by GitHub
parent 0f5bf6071f
commit 99370b2ac4
2 changed files with 28 additions and 26 deletions
+27 -25
View File
@@ -55,34 +55,36 @@
{/each} {/each}
</div> --> </div> -->
<div class="grid grid-flow-col grid-rows-7 gap-0.5"> <div class="overflow-x-auto pb-1">
<div class="row-span-7 grid grid-rows-subgrid"> <div class="grid grid-flow-col grid-rows-7 gap-0.5">
{#if Info.getStartOfWeek({ locale: $locale }) === 7} <div class="row-span-7 grid grid-rows-subgrid">
<div></div> {#if Info.getStartOfWeek({ locale: $locale }) === 7}
{/if} <div></div>
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[0]}</Text></div> {/if}
<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[0]}</Text></div>
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[2]}</Text></div> <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[1]}</Text></div>
{#if Info.getStartOfWeek({ locale: $locale }) === 1} <div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[2]}</Text></div>
<div class="-my-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[3]}</Text></div> {#if Info.getStartOfWeek({ locale: $locale }) === 1}
{/if} <div class="-my-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[3]}</Text></div>
</div> {/if}
</div>
{#each data.series as day, idx (day.date)} {#each data.series as day, idx (day.date)}
{@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString( {@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString(
{ month: 'short', day: 'numeric' }, { month: 'short', day: 'numeric' },
{ locale: $locale }, { locale: $locale },
)} )}
<div <div
class="aspect-square size-full rounded-sm {itemColors(day.count)} row-start-(--heatmap-row-start)" class="aspect-square size-full rounded-sm {itemColors(day.count)} row-start-(--heatmap-row-start)"
style:--heatmap-row-start={idx === 0 ? padding + 1 : undefined} style:--heatmap-row-start={idx === 0 ? padding + 1 : undefined}
title={itemLabel({ date, count: day.count })} title={itemLabel({ date, count: day.count })}
aria-label={itemLabel({ date, count: day.count })} aria-label={itemLabel({ date, count: day.count })}
></div> ></div>
{/each} {/each}
</div>
</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>{$t('less')}</span>
<span class="size-3 rounded-sm bg-gray-200 dark:bg-gray-700"></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> <span class="size-3 rounded-sm bg-immich-primary/30"></span>
@@ -213,7 +213,7 @@
</Stack> </Stack>
</AdminCard> </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"> <div class="flex gap-2 text-primary">
<Icon icon={mdiCloudUploadOutline} size="1.5rem" /> <Icon icon={mdiCloudUploadOutline} size="1.5rem" />
<CardTitle>{$t('uploads')}</CardTitle> <CardTitle>{$t('uploads')}</CardTitle>