Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-16 03:23:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore: cannonical tailwind classes (#23427)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-10-31 16:38:17 +01:00 committed by GitHub
parent be15a84f9b
commit f5d7e5acca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
69 changed files with 117 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
View File

@ -25,7 +25,7 @@
<p>{$t('admin.storage_template_date_time_description')}</p>
<p>{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-03T20:03:05.250' } })}</p>
</div>
<div class="flex gap-[40px]">
<div class="flex gap-10">
<div>
<p class="uppercase font-medium text-primary">{$t('year')}</p>
<ul>

2
web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte
View File

@ -7,7 +7,7 @@
</div>
<div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
<div class="flex gap-[50px]">
<div class="flex gap-12">
<div>
<p class="uppercase font-medium text-primary">{$t('filename')}</p>
<ul>

2
web/src/lib/components/album-page/albums-table-row.svelte
View File

@ -32,7 +32,7 @@
</script>
<tr
class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
class="flex h-12 w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
onclick={() => goto(resolve(`${AppRoute.ALBUMS}/${album.id}`))}
{oncontextmenu}
>

10
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@ -141,14 +141,14 @@
<UserAvatar user={reaction.user} size="sm" />
</div>
<div class="w-full leading-4 overflow-hidden self-center break-words text-sm">{reaction.comment}</div>
<div class="w-full leading-4 overflow-hidden self-center wrap-break-word text-sm">{reaction.comment}</div>
{#if assetId === undefined && reaction.assetId}
<a
class="aspect-square w-[75px] h-[75px]"
class="aspect-square w-19 h-19"
href={resolve(`${AppRoute.ALBUMS}/${albumId}/photos/${reaction.assetId}`)}
>
<img
class="rounded-lg w-[75px] h-[75px] object-cover"
class="rounded-lg w-19 h-19 object-cover"
src={getAssetThumbnailUrl(reaction.assetId)}
alt="Profile picture of {reaction.user.name}, who commented on this asset"
/>
@ -197,11 +197,11 @@
</div>
{#if assetId === undefined && reaction.assetId}
<a
class="aspect-square w-[75px] h-[75px]"
class="aspect-square w-19 h-19"
href={resolve(`${AppRoute.ALBUMS}/${albumId}/photos/${reaction.assetId}`)}
>
<img
class="rounded-lg w-[75px] h-[75px] object-cover"
class="rounded-lg w-19 h-19 object-cover"
src={getAssetThumbnailUrl(reaction.assetId)}
alt="Profile picture of {reaction.user.name}, who liked this asset"
/>

2
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -593,7 +593,7 @@
{#if stackedAsset.id === asset.id}
<div class="w-full flex place-items-center place-content-center">
<div class="w-2 h-2 bg-white rounded-full flex mt-[2px]"></div>
<div class="w-2 h-2 bg-white rounded-full flex mt-0.5"></div>
</div>
{/if}
</div>

4
web/src/lib/components/asset-viewer/detail-panel-description.svelte
View File

@ -31,13 +31,13 @@
<section class="px-4 mt-10">
<AutogrowTextarea
content={description}
class="max-h-[500px] w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
class="max-h-125 w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
onContentUpdate={handleFocusOut}
placeholder={$t('add_a_description')}
/>
</section>
{:else if description}
<section class="px-4 mt-6">
<p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
<p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
</section>
{/if}

6
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -199,7 +199,7 @@
{#each people as person, index (person.id)}
{#if showingHiddenPeople || !person.isHidden}
<a
class="w-[90px]"
class="w-22"
href={resolve(
`${AppRoute.PEOPLE}/${person.id}?${QueryParameter.PREVIOUS_ROUTE}=${
currentAlbum?.id ? `${AppRoute.ALBUMS}/${currentAlbum?.id}` : AppRoute.PHOTOS
@ -439,7 +439,7 @@
</section>
{#if latlng && $featureFlags.loaded && $featureFlags.map}
<div class="h-[360px]">
<div class="h-90">
{#await import('$lib/components/shared-components/map/map.svelte')}
{#await delay(timeToLoadTheMap) then}
<!-- show the loading spinner only if loading the map takes too much time -->
@ -511,7 +511,7 @@
<div>
<img
alt={album.albumName}
class="h-[50px] w-[50px] rounded object-cover"
class="h-12.5 w-12.5 rounded object-cover"
src={album.albumThumbnailAssetId &&
getAssetThumbnailUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
draggable="false"

10
web/src/lib/components/asset-viewer/download-panel.svelte
View File

@ -16,10 +16,10 @@
{#if downloadManager.isDownloading}
<div
transition:fly={{ x: -100, duration: 350 }}
class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
class="fixed bottom-10 start-2 max-h-67.5 w-79 rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
>
<Heading size="tiny">{$t('downloading')}</Heading>
<div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">
<div class="my-2 mb-2 flex max-h-50 flex-col overflow-y-auto text-sm">
{#each Object.keys(downloadManager.assets) as downloadKey (downloadKey)}
{@const download = downloadManager.assets[downloadKey]}
<div class="mb-2 flex place-items-center" transition:slide>
@ -31,10 +31,10 @@
{/if}
</div>
<div class="flex place-items-center gap-2">
<div class="h-[10px] w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
<div class="h-[10px] rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
<div class="h-2.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
<div class="h-2.5 rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
</div>
<p class="min-w-[4em] whitespace-nowrap text-right">
<p class="min-w-16 whitespace-nowrap text-right">
<span class="text-primary">
{(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
</span>

2
web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
View File

@ -322,7 +322,7 @@
<Input placeholder={$t('search_people')} bind:value={searchTerm} size="tiny" />
</div>
<div class="h-[250px] overflow-y-auto mt-2">
<div class="h-62.5 overflow-y-auto mt-2">
{#if filteredCandidates.length > 0}
<div class="mt-2 rounded-lg">
{#each filteredCandidates as person (person.id)}

2
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -257,7 +257,7 @@
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
<div
class="absolute border-solid border-white border-[3px] rounded-lg"
class="absolute border-solid border-white border-3 rounded-lg"
style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
></div>
{/each}

2
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View File

@ -68,7 +68,7 @@
circle && 'rounded-full',
shadow && 'shadow-lg',
(circle || !heightStyle) && 'aspect-square',
border && 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary',
border && 'border-3 border-immich-dark-primary/80 hover:border-immich-primary',
brokenAssetClass,
]
.filter(Boolean)

2
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@ -232,7 +232,7 @@
></div>
<div
class={['group absolute -top-[0px] -bottom-[0px]', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
class={['group absolute top-0 bottom-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
style:width="inherit"
style:height="inherit"
>

4
web/src/lib/components/faces-page/assign-face-side-panel.svelte
View File

@ -73,7 +73,7 @@
<section
transition:fly={{ x: 360, duration: 100, easing: linear }}
class="absolute top-0 h-full w-[360px] overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
>
<div class="flex place-items-center justify-between gap-2">
{#if !searchFaces}
@ -157,7 +157,7 @@
{#each showPeople as person (person.id)}
{#if !editedFace.person || person.id !== editedFace.person.id}
<div class="w-fit">
<button type="button" class="w-[90px]" onclick={() => onReassign(person)}>
<button type="button" class="w-22.5" onclick={() => onReassign(person)}>
<div class="relative">
<ImageThumbnail
curve

4
web/src/lib/components/faces-page/merge-face-selector.svelte
View File

@ -103,9 +103,9 @@
</Button>
{/snippet}
</ControlAppBar>
<section class="px-[70px] pt-[100px]">
<section class="px-17.5 pt-25">
<section id="merge-face-selector">
<div class="mb-10 h-[200px] place-content-center place-items-center">
<div class="mb-10 h-50 place-content-center place-items-center">
<p class="mb-4 text-center uppercase dark:text-white">{$t('choose_matching_people_to_merge')}</p>
<div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">

12
web/src/lib/components/faces-page/person-side-panel.svelte
View File

@ -186,7 +186,7 @@
<section
transition:fly={{ x: 360, duration: 100, easing: linear }}
class="absolute top-0 h-full w-[360px] overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
>
<div class="flex place-items-center justify-between gap-2">
<div class="flex items-center gap-2">
@ -222,11 +222,11 @@
{:else}
{#each peopleWithFaces as face, index (face.id)}
{@const personName = face.person ? face.person?.name : $t('face_unassigned')}
<div class="relative h-[115px] w-[95px]">
<div class="relative h-29 w-24">
<div
role="button"
tabindex={index}
class="absolute start-0 top-0 h-[90px] w-[90px] cursor-default"
class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
onmouseleave={() => ($boundingBoxesArray = [])}
@ -302,7 +302,7 @@
</p>
{/if}
<div class="absolute -end-[3px] -top-[3px] h-[20px] w-[20px] rounded-full">
<div class="absolute -end-[3px] -top-[3px] h-5 w-5 rounded-full">
{#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
<IconButton
shape="round"
@ -326,7 +326,7 @@
/>
{/if}
</div>
<div class="absolute end-[33px] -top-[3px] h-[20px] w-[20px] rounded-full">
<div class="absolute end-8 -top-[3px] h-5 w-5 rounded-full">
{#if !selectedPersonToCreate[face.id] && !selectedPersonToReassign[face.id] && !face.person}
<div
class="flex place-content-center place-items-center rounded-full bg-[#d3d3d3] p-1 transition-all absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
@ -336,7 +336,7 @@
{/if}
</div>
{#if face.person != null}
<div class="absolute -end-[3px] top-[33px] h-[20px] w-[20px] rounded-full">
<div class="absolute -end-[3px] top-8 h-5 w-5 rounded-full">
<IconButton
shape="round"
color="danger"

4
web/src/lib/components/faces-page/unmerge-face-selector.svelte
View File

@ -147,10 +147,10 @@
{/snippet}
</ControlAppBar>
{@render merge?.()}
<section class="px-[70px] pt-[100px]">
<section class="px-17.5 pt-25">
<section id="merge-face-selector relative">
{#if selectedPerson !== null}
<div class="mb-10 h-[200px] place-content-center place-items-center">
<div class="mb-10 h-50 place-content-center place-items-center">
<p class="mb-4 text-center uppercase dark:text-white">Choose matching faces to re assign</p>
<div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">

4
web/src/lib/components/forms/library-import-paths-form.svelte
View File

@ -156,7 +156,7 @@
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#each validatedPaths as validatedPath, listIndex (validatedPath.importPath)}
<tr
class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="w-1/8 text-ellipsis ps-8 text-sm">
{#if validatedPath.isValid}
@ -180,7 +180,7 @@
</tr>
{/each}
<tr
class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="w-4/5 text-ellipsis px-4 text-sm">
{#if importPaths.length === 0}

4
web/src/lib/components/forms/library-scan-settings-form.svelte
View File

@ -111,7 +111,7 @@
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#each exclusionPatterns as exclusionPattern, listIndex (exclusionPattern)}
<tr
class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
<td class="w-1/4 text-ellipsis flex justify-center">
@ -128,7 +128,7 @@
</tr>
{/each}
<tr
class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="w-3/4 text-ellipsis px-4 text-sm">
{#if exclusionPatterns.length === 0}

4
web/src/lib/components/jobs/JobTile.svelte
View File

@ -53,9 +53,7 @@
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pe-4 ps-6';
</script>
<div
class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-[35px]"
>
<div class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-9">
<div class="flex w-full flex-col">
{#if queueStatus.isPaused}
<JobTileStatus color="warning">{$t('paused')}</JobTileStatus>

6
web/src/lib/components/layouts/ErrorLayout.svelte
View File

@ -24,7 +24,7 @@
<section>
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
<a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
<ImmichLogo class="h-[50px]" />
<ImmichLogo class="h-12.5" />
</a>
</div>
</section>
@ -32,7 +32,7 @@
<div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
<div>
<div
class="w-[500px] max-w-[95vw] rounded-3xl border shadow-sm dark:border-immich-dark-gray dark:text-immich-dark-fg bg-subtle/80"
class="w-125 max-w-[95vw] rounded-3xl border shadow-sm dark:border-immich-dark-gray dark:text-immich-dark-fg bg-subtle/80"
>
<div>
<div class="flex items-center justify-between gap-4 px-4 py-4">
@ -52,7 +52,7 @@
<hr />
<div class="immich-scrollbar max-h-[75vh] min-h-[300px] gap-4 overflow-y-auto p-4 pb-4">
<div class="immich-scrollbar max-h-[75vh] min-h-75 gap-4 overflow-y-auto p-4 pb-4">
<div class="flex w-full flex-col gap-2">
<p class="text-red-500">{error?.message} ({error?.code})</p>
{#if error?.stack}

10
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -372,7 +372,7 @@
{/snippet}
<div class="flex place-content-center place-items-center gap-2 overflow-hidden">
<div class="w-[50px] dark">
<div class="w-12.5 dark">
<IconButton
shape="round"
variant="ghost"
@ -385,8 +385,8 @@
{#each current.memory.assets as asset, index (asset.id)}
<a class="relative w-full py-2" href={asHref(asset)} aria-label={$t('view')}>
<span class="absolute start-0 h-[2px] w-full bg-gray-500"></span>
<span class="absolute start-0 h-[2px] bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
<span class="absolute start-0 h-0.5 w-full bg-gray-500"></span>
<span class="absolute start-0 h-0.5 bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
</a>
{/each}
@ -397,7 +397,7 @@
</div>
{#if currentTimelineAssets.some(({ isVideo }) => isVideo)}
<div class="w-[50px] dark">
<div class="w-12.5 dark">
<IconButton
shape="round"
variant="ghost"
@ -502,7 +502,7 @@
color="secondary"
aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
onclick={() => handleSaveMemory()}
class="w-[48px] h-[48px]"
class="w-12 h-12"
/>
<!-- <IconButton
icon={mdiShareVariantOutline}

2
web/src/lib/components/onboarding-page/onboarding-hello.svelte
View File

@ -9,7 +9,7 @@
</script>
<div class="gap-4">
<ImmichLogo noText class="h-[100px] mb-2" />
<ImmichLogo noText class="h-25 mb-2" />
<p class="font-medium mb-6 text-6xl text-primary">
{$t('onboarding_welcome_user', { values: { user: $user.name } })}
</p>

12
web/src/lib/components/photos-page/memory-lane.svelte
View File

@ -47,10 +47,7 @@
{#if canScrollLeft || canScrollRight}
<div class="sticky start-0 z-1">
{#if canScrollLeft}
<div
class="absolute start-4 max-md:top-[75px] top-[108px] -translate-y-1/2"
transition:fade={{ duration: 200 }}
>
<div class="absolute start-4 max-md:top-19 top-27 -translate-y-1/2" transition:fade={{ duration: 200 }}>
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@ -63,10 +60,7 @@
</div>
{/if}
{#if canScrollRight}
<div
class="absolute end-4 max-md:top-[75px] top-[108px] -translate-y-1/2 z-1"
transition:fade={{ duration: 200 }}
>
<div class="absolute end-4 max-md:top-19 top-27 -translate-y-1/2 z-1" transition:fade={{ duration: 200 }}>
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@ -83,7 +77,7 @@
<div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
{#each memoryStore.memories as memory (memory.id)}
<a
class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-[150px] xl:aspect-video h-[216px] rounded-xl"
class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-37.5 xl:aspect-video h-54 rounded-xl"
href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
>
<img

4
web/src/lib/components/places-page/places-card-group.svelte
View File

@ -43,12 +43,12 @@
{@const city = item.exifInfo?.city}
<a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city })}" draggable="false">
<div
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-39 justify-center overflow-hidden rounded-xl brightness-75 filter"
>
<img
src={getAssetThumbnailUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
alt={city}
class="object-cover w-[156px] h-[156px]"
class="object-cover w-39 h-39"
/>
</div>
<span

2
web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
View File

@ -20,7 +20,7 @@
});
</script>
<div class="flex h-[140px] w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
<div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
<div class="flex place-items-center gap-4">
<Icon {icon} size="40" />
<Text size="large" fontWeight="bold" class="uppercase">{title}</Text>

4
web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
View File

@ -100,10 +100,10 @@
</tr>
</thead>
<tbody
class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
class="block max-h-80 w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
>
{#each stats.usageByUser as user (user.userId)}
<tr class="flex h-[50px] w-full place-items-center text-center even:bg-subtle/20 odd:bg-subtle/80">
<tr class="flex h-12.5 w-full place-items-center text-center even:bg-subtle/20 odd:bg-subtle/80">
<td class="w-1/4 text-ellipsis px-2 text-sm">{user.userName}</td>
<td class="w-1/4 text-ellipsis px-2 text-sm"
>{user.photos.toLocaleString($locale)} ({getByteUnitString(user.usagePhotos, $locale, 0)})</td

2
web/src/lib/components/share-page/individual-shared-viewer.svelte
View File

@ -136,7 +136,7 @@
{/snippet}
</ControlAppBar>
{/if}
<section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
<section class="my-40 mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
<GalleryViewer {assets} {assetInteraction} {viewport} />
</section>
{:else if assets.length === 1}

2
web/src/lib/components/shared-components/change-location.svelte
View File

@ -172,7 +172,7 @@
</div>
<span>{$t('pick_a_location')}</span>
<div class="h-[500px] min-h-[300px] w-full z-0">
<div class="h-125 min-h-75 w-full z-0">
{#await import('$lib/components/shared-components/map/map.svelte')}
{#await delay(timeToLoadTheMap) then}
<!-- show the loading spinner only if loading the map takes too much time -->

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View File

@ -61,7 +61,7 @@
<div
bind:clientHeight={height}
class="fixed min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg z-1"
class="fixed min-w-50 w-max max-w-75 overflow-hidden rounded-lg shadow-lg z-1"
style:left="{left}px"
style:top="{top}px"
transition:slide={{ duration: 250, easing: quintOut }}

2
web/src/lib/components/shared-components/immich-logo-small-link.svelte
View File

@ -4,5 +4,5 @@
</script>
<a data-sveltekit-preload-data="hover" class="ms-4" href="/">
<ImmichLogo class="h-[50px] max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
<ImmichLogo class="h-12.5 max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
</a>

4
web/src/lib/components/shared-components/map/map.svelte
View File

@ -359,7 +359,7 @@
>
{#snippet children({ feature })}
<div
class="rounded-full w-[40px] h-[40px] bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
class="rounded-full w-10 h-10 bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
>
{feature.properties?.point_count?.toLocaleString()}
</div>
@ -380,7 +380,7 @@
{:else}
<img
src={getAssetThumbnailUrl(feature.properties?.id)}
class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
class="rounded-full w-15 h-15 border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
alt={feature.properties?.city && feature.properties.country
? $t('map_marker_for_images', {
values: { city: feature.properties.city, country: feature.properties.country },

2
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@ -32,7 +32,7 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute z-1 end-[25px] top-[75px] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
class="absolute z-1 end-6 top-19 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
use:focusTrap
>
<div

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -78,7 +78,7 @@
class="sidebar:hidden"
/>
<a data-sveltekit-preload-data="hover" href={AppRoute.PHOTOS}>
<ImmichLogo class="max-md:h-[48px] h-[50px]" noText={!mobileDevice.isFullSidebar} />
<ImmichLogo class="max-md:h-12 h-12.5" noText={!mobileDevice.isFullSidebar} />
</a>
</div>
<div class="flex justify-between gap-4 lg:gap-8 pe-6">

2
web/src/lib/components/shared-components/navigation-bar/notification-item.svelte
View File

@ -100,7 +100,7 @@
</script>
<button
class="min-h-[80px] p-2 py-3 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 border-b border-gray-200 dark:border-immich-dark-gray w-full"
class="min-h-20 p-2 py-3 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 border-b border-gray-200 dark:border-immich-dark-gray w-full"
type="button"
onclick={() => onclick(notification)}
title={notification.createdAt}

4
web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
View File

@ -66,10 +66,10 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="notification-panel"
class="absolute right-[25px] top-[70px] z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light"
class="absolute right-6 top-17.5 z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light"
use:focusTrap
>
<Stack class="max-h-[500px]">
<Stack class="max-h-125">
<div class="flex justify-between items-center mt-4 mx-4">
<Text size="medium" color="secondary" class="font-semibold">{$t('notifications')}</Text>
<div>

2
web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
View File

@ -20,7 +20,7 @@
<p>{$t('purchase_per_user')}</p>
</div>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="flex flex-col justify-between h-50 dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />

2
web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
View File

@ -20,7 +20,7 @@
<p>{$t('purchase_per_server')}</p>
</div>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="flex flex-col justify-between h-50 dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />

2
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View File

@ -235,7 +235,7 @@
name="q"
id="main-search-bar"
class="w-full transition-all border-2 ps-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg
{showClearIcon ? 'pe-[90px]' : 'pe-14'}
{showClearIcon ? 'pe-22.5' : 'pe-14'}
{grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
{showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
{searchStore.isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"

2
web/src/lib/components/shared-components/search-bar/search-people-section.svelte
View File

@ -52,7 +52,7 @@
</script>
{#await peoplePromise}
<div id="spinner" class="flex h-[217px] items-center justify-center -mb-4">
<div id="spinner" class="flex h-54 items-center justify-center -mb-4">
<LoadingSpinner size="large" />
</div>
{:then people}

2
web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
View File

@ -30,7 +30,7 @@
</script>
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for="{name}-select">
{label}
</label>

2
web/src/lib/components/shared-components/settings/setting-combobox.svelte
View File

@ -30,7 +30,7 @@
<div class="grid grid-cols-2">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={title}>
{title}
</label>

2
web/src/lib/components/shared-components/settings/setting-dropdown.svelte
View File

@ -28,7 +28,7 @@
<div class="flex place-items-center justify-between">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={title}>
{title}
</label>

2
web/src/lib/components/shared-components/settings/setting-select.svelte
View File

@ -39,7 +39,7 @@
</script>
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
{#if isEdited}

2
web/src/lib/components/shared-components/settings/setting-switch.svelte
View File

@ -34,7 +34,7 @@
<div class="flex place-items-center justify-between">
<div class="me-2">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={sliderId}>
{title}
</label>

2
web/src/lib/components/shared-components/settings/setting-textarea.svelte
View File

@ -30,7 +30,7 @@
</script>
<div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>

2
web/src/lib/components/shared-components/settings/settings-language-selector.svelte
View File

@ -37,7 +37,7 @@
<div class={showSettingDescription ? 'grid grid-cols-2' : ''}>
{#if showSettingDescription}
<div>
<div class="flex h-[26px] place-items-center gap-1">
<div class="flex h-6.5 place-items-center gap-1">
<label class="font-medium text-primary text-sm" for={$t('language')}>
{$t('language')}
</label>

6
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View File

@ -94,7 +94,7 @@
<div class="flex justify-between w-full place-items-center place-content-center">
<div class="flex place-items-center place-content-center gap-1">
<div class="h-6 w-6">
<ImmichLogo noText class="h-[24px]" />
<ImmichLogo noText class="h-6" />
</div>
<p class="flex text-primary font-medium">
{$t('purchase_button_buy_immich')}
@ -113,7 +113,7 @@
{#if showMessage}
<dialog
open
class="hidden sidebar:block w-[500px] absolute bottom-[75px] start-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl shadow-2xl px-8 py-6"
class="hidden sidebar:block w-125 absolute bottom-19 start-64 bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl shadow-2xl px-8 py-6"
transition:fade={{ duration: 150 }}
onmouseover={() => (hoverMessage = true)}
onmouseleave={() => (hoverMessage = false)}
@ -122,7 +122,7 @@
>
<div class="flex justify-between place-items-center">
<div class="h-10 w-10">
<ImmichLogo noText class="h-[32px]" />
<ImmichLogo noText class="h-8" />
</div>
<IconButton
shape="round"

4
web/src/lib/components/shared-components/upload-asset-preview.svelte
View File

@ -95,8 +95,8 @@
</div>
{#if uploadAsset.state === UploadState.STARTED}
<div class="text-black relative mt-[5px] h-[18px] w-full rounded-md bg-gray-300 dark:bg-gray-700">
<div class="h-[18px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
<div class="text-black relative mt-[5px] h-4.5 w-full rounded-md bg-gray-300 dark:bg-gray-700">
<div class="h-4.5 rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
<p class="absolute top-0.5 h-full w-full text-center text-white text-[10px]">
{#if uploadAsset.message === $t('asset_hashing')}
{uploadAsset.message}

6
web/src/lib/components/shared-components/upload-panel.svelte
View File

@ -42,7 +42,7 @@
{#if showDetail}
<div
in:scale={{ duration: 250, easing: quartInOut }}
class="w-[325px] rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
class="w-81 rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
>
<div class="place-item-center mb-4 flex justify-between">
<div class="flex flex-col gap-1">
@ -101,8 +101,8 @@
</div>
</div>
{#if showOptions}
<div class="immich-scrollbar mb-4 max-h-[400px] overflow-y-auto rounded-lg">
<div class="flex h-[26px] place-items-center gap-1">
<div class="immich-scrollbar mb-4 max-h-100 overflow-y-auto rounded-lg">
<div class="flex h-6.5 place-items-center gap-1">
<label class="immich-form-label" for="upload-concurrency">{$t('upload_concurrency')}</label>
</div>
<input

2
web/src/lib/components/sidebar/sidebar.spec.ts
View File

@ -61,7 +61,7 @@ describe('Sidebar component', () => {
const parent = screen.getByTestId('sidebar-parent');
// then
expect(parent.classList).toContain('sidebar:w-[16rem]'); // sets the initial width for page load
expect(parent.classList).toContain('sidebar:w-64'); // sets the initial width for page load
expect(parent.classList).toContain('w-[min(100vw,16rem)]');
expect(parent.classList).toContain('shadow-2xl');
});

2
web/src/lib/components/sidebar/sidebar.svelte
View File

@ -35,7 +35,7 @@
id="sidebar"
aria-label={ariaLabel}
tabindex="-1"
class="immich-scrollbar relative z-1 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden pt-8 transition-all duration-200 bg-light"
class="immich-scrollbar relative z-1 w-0 sidebar:w-64 overflow-y-auto overflow-x-hidden pt-8 transition-all duration-200 bg-light"
class:shadow-2xl={isExpanded}
class:dark:border-e-immich-dark-gray={isExpanded}
class:border-r={isExpanded}

12
web/src/lib/components/timeline/Scrubber.svelte
View File

@ -528,7 +528,7 @@
{#if usingMobileDevice && ((timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging)}
<div
id="time-label"
class="rounded-s-full w-[32px] ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
class="rounded-s-full w-8 ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
style:top="{PADDING_TOP + (scrollY - 50 / 2)}px"
style:height="50px"
style:right="0"
@ -536,15 +536,15 @@
in:fade={{ duration: 200 }}
out:fade={{ duration: 200 }}
>
<Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-[2px]" />
<Icon icon={mdiPlay} size="20" class="rotate-90 relative top-px -end-[2px]" />
<Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-0.5" />
<Icon icon={mdiPlay} size="20" class="rotate-90 relative top-px -end-0.5" />
{#if (timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging}
<p
transition:fade={{ duration: 200 }}
style:bottom={50 / 2 - 30 / 2 + 'px'}
style:right="36px"
style:width="fit-content"
class="truncate pointer-events-none absolute text-sm rounded-full w-[32px] py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
class="truncate pointer-events-none absolute text-sm rounded-full w-8 py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
>
{scrollHoverLabel}
</p>
@ -553,7 +553,7 @@
{/if}
<!-- Scroll Position Indicator Line -->
{#if !usingMobileDevice && !isDragging}
<div class="absolute end-0 h-[2px] w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
<div class="absolute end-0 h-0.5 w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
{#if timelineManager.scrolling && scrollHoverLabel && !isHover}
<p
transition:fade={{ duration: 200 }}
@ -586,7 +586,7 @@
</div>
{/if}
{#if segment.hasDot}
<div class="absolute end-3 bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
<div class="absolute end-3 bottom-0 h-1 w-1 rounded-full bg-gray-300"></div>
{/if}
{/if}
</div>

2
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View File

@ -80,7 +80,7 @@
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#each keys as key (key.id)}
<tr
class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden">{key.name}</td>
<td

2
web/src/lib/elements/Dropdown.svelte
View File

@ -107,7 +107,7 @@
{#if showMenu}
<div
transition:fly={{ y: -30, duration: 250 }}
class="text-sm font-medium z-1 absolute flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
class="text-sm font-medium z-1 absolute flex min-w-75 max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
position,
)}"
>

2
web/src/lib/modals/AlbumEditModal.svelte
View File

@ -39,7 +39,7 @@
<ModalBody>
<form onsubmit={handleSubmit} autocomplete="off" id="edit-album-form">
<div class="flex items-center gap-8 m-4">
<AlbumCover {album} class="h-[200px] w-[200px] shadow-lg hidden sm:flex" />
<AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />
<div class="grow flex flex-col gap-4">
<Field label={$t('name')}>

2
web/src/lib/modals/AlbumPickerModal.svelte
View File

@ -148,7 +148,7 @@
<Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
<ModalBody>
<div class="mb-2 flex max-h-[400px] flex-col">
<div class="mb-2 flex max-h-100 flex-col">
{#if loading}
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each { length: 3 } as _}

2
web/src/lib/modals/AlbumShareModal.svelte
View File

@ -117,7 +117,7 @@
</p>
{/if}
<div class="immich-scrollbar max-h-[500px] overflow-y-auto">
<div class="immich-scrollbar max-h-125 overflow-y-auto">
{#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
<Text>{$t('users')}</Text>

2
web/src/lib/modals/AlbumUsersModal.svelte
View File

@ -99,7 +99,7 @@
<Modal title={$t('options')} size="small" {onClose}>
<ModalBody>
<section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
<section class="immich-scrollbar max-h-100 overflow-y-auto pb-4">
{#each [{ user: album.owner, role: 'owner' }, ...album.albumUsers] as { user, role } (user.id)}
<div class="flex w-full place-items-center justify-between gap-4 p-5 rounded-xl transition-colors">
<div class="flex place-items-center gap-4">

6
web/src/lib/modals/AppDownloadModal.svelte
View File

@ -17,21 +17,21 @@
target="_blank"
id="play-store-link"
>
<img class="w-[200px] mt-2" alt="Get it on Google Play" src={playStoreBadge} />
<img class="w-50 mt-2" alt="Get it on Google Play" src={playStoreBadge} />
</a>
</div>
<div class="flex flex-col place-items-start">
<Text>App Store</Text>
<a href="https://apps.apple.com/us/app/immich/id1613945652" target="_blank" id="app-store-link">
<img class="w-[200px] mt-2" alt="Download on the App Store" src={appStoreBadge} />
<img class="w-50 mt-2" alt="Download on the App Store" src={appStoreBadge} />
</a>
</div>
<div class="flex flex-col place-items-start">
<Text>F-Droid</Text>
<a href="https://f-droid.org/packages/app.alextran.immich/" target="_blank" id="fdroid-link">
<img class="w-[200px] mt-2" alt="Get it on F-Droid" src={fdroidBadge} />
<img class="w-50 mt-2" alt="Get it on F-Droid" src={fdroidBadge} />
</a>
</div>
</div>

2
web/src/lib/modals/ObtainiumConfigModal.svelte
View File

@ -73,7 +73,7 @@
rel="noreferrer"
id="obtainium-link"
>
<img class="pt-2 pr-5 h-[80px]" alt="Get it on Obtainium" src={obtainiumBadge} />
<img class="pt-2 pr-5 h-20" alt="Get it on Obtainium" src={obtainiumBadge} />
</a>
</div>
</div>

2
web/src/lib/modals/PartnerSelectionModal.svelte
View File

@ -36,7 +36,7 @@
<Modal title={$t('add_partner')} {onClose} size="small">
<ModalBody>
<div class="immich-scrollbar max-h-[300px] overflow-y-auto">
<div class="immich-scrollbar max-h-75 overflow-y-auto">
{#if availableUsers.length > 0}
{#each availableUsers as user (user.id)}
<button

2
web/src/lib/modals/ProfileImageCropperModal.svelte
View File

@ -83,7 +83,7 @@
<ModalBody>
<div class="flex place-items-center items-center justify-center">
<div
class="relative flex aspect-square w-[250px] overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
class="relative flex aspect-square w-62.5 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
>
<PhotoViewer bind:element={imgElement} {asset} />
</div>

6
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -516,8 +516,8 @@
{/if}
{#if album.assetCount === 0}
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
<div class="w-[300px]">
<section id="empty-album" class=" mt-50 flex place-content-center place-items-center">
<div class="w-75">
<p class="uppercase text-xs dark:text-immich-dark-fg">{$t('add_photos')}</p>
<button
type="button"
@ -722,7 +722,7 @@
<div
transition:fly={{ duration: 150 }}
id="activity-panel"
class="z-2 w-[360px] md:w-[460px] overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
class="z-2 w-90 md:w-115 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
translate="yes"
>
<ActivityViewer

2
web/src/routes/admin/jobs-status/+page.svelte
View File

@ -95,7 +95,7 @@
</HStack>
{/snippet}
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
<section class="w-full pb-28 sm:w-5/6 md:w-212.5">
{#if jobs}
<JobsPanel {jobs} />
{/if}

2
web/src/routes/admin/library-management/+page.svelte
View File

@ -278,7 +278,7 @@
<tbody class="block overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#each libraries as library, index (library.id)}
<tr
class="grid grid-cols-6 h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
class="grid grid-cols-6 h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
>
<td class="text-ellipsis px-4 text-sm">{library.name}</td>
<td class="text-ellipsis px-4 text-sm">

2
web/src/routes/admin/server-status/+page.svelte
View File

@ -28,7 +28,7 @@
<AdminPageLayout 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-[850px]">
<section class="w-full pb-28 sm:w-5/6 md:w-212.5">
<ServerStatisticsPanel stats={data.stats} />
</section>
</section>

2
web/src/routes/admin/system-settings/+page.svelte
View File

@ -285,7 +285,7 @@
<AdminSettings bind:config bind:this={adminSettingElement}>
{#snippet children({ savedConfig, defaultConfig })}
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
<section class="w-full pb-28 sm:w-5/6 md:w-4xl">
{#if $featureFlags.configFile}
<Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
{/if}

4
web/src/routes/admin/users/+page.svelte
View File

@ -77,7 +77,7 @@
</HStack>
{/snippet}
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 lg:w-[850px]">
<section class="w-full pb-28 lg:w-212.5">
<table class="my-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"
@ -95,7 +95,7 @@
{#if allUsers}
{#each allUsers as immichUser (immichUser.id)}
<tr
class="flex h-[80px] overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {immichUser.deletedAt
class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {immichUser.deletedAt
? 'bg-red-300 dark:bg-red-900'
: 'even:bg-subtle/20 odd:bg-subtle/80'}"
>

2
web/src/routes/auth/onboarding/+page.svelte
View File

@ -167,7 +167,7 @@
style="width: {(onboardingProgress / onboardingStepCount) * 100}%"
></div>
</div>
<div class="py-8 flex place-content-center place-items-center m-auto w-[min(100%,_800px)]">
<div class="py-8 flex place-content-center place-items-center m-auto w-[min(100%,800px)]">
<OnboardingCard
title={onboardingSteps[index].title}
icon={onboardingSteps[index].icon}