feat(web): small responsivness improvements regarding mobile use (#2255)

* make sidebar load more fluid
use css before js kicks in
added xs breakpoint in tailwind config

* fix sidebar hr still showing if opened

* make share tab not overflow on mobile

* make user management tab responsive

* make jobs panel responsive

* fix format in tailwind config

* fix full width on large screens
use md breakpoint for w-[800px]

* show accessible name for all screens

* replace grid with flex-col

* replace all xs with sm

* remove isCollapsed completly
using only tailwinds group feature and sm and md breakpoints

* remove leftovers of isCollapsed
and make the settings content less stretched

* remove isCollapsed in layout and side-bar

* fix code style

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/admin-page/jobs/job-tile-button.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <button
-	class="h-full flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
+	class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
 		color
 	]}"
 	on:click

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -24,7 +24,9 @@
 	const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
 </script>
 
-<div class="flex bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden">
+<div
+	class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden"
+>
 	<div class="flex flex-col w-full">
 		{#if queueStatus.isPaused}
 			<JobTileStatus color="warning">Paused</JobTileStatus>
@@ -78,7 +80,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="flex flex-col w-32 overflow-hidden">
+	<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
 		{#if !isIdle}
 			{#if waitingCount > 0}
 				<JobTileButton

web/src/lib/components/shared-components/side-bar/side-bar-button.svelte

@@ -7,7 +7,6 @@
 	export let title: string;
 	export let logo: typeof Icon;
 	export let isSelected: boolean;
-	export let isCollapsed: boolean;
 
 	let showMoreInformation = false;
 
@@ -22,18 +21,18 @@
     {isSelected
 		? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
 		: ''}
-		{isCollapsed ? 'pl-5' : 'px-5'}
+		pl-5 group-hover:sm:px-5 md:px-5
   "
 >
-	<div class="flex gap-4 place-items-center w-full overflow-hidden">
+	<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
 		<svelte:component this={logo} size="1.5em" class="shrink-0" />
 		<p class="font-medium text-sm">{title}</p>
 	</div>
 
 	<div
-		class="transition-[height] duration-100 delay-200 {isCollapsed ? 'height-0' : 'height-auto'}"
+		class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000  sm:group-hover:h-auto md:h-auto h-0"
 	>
-		{#if $$slots.moreInformation && !isCollapsed}
+		{#if $$slots.moreInformation}
 			<div
 				class="relative flex justify-center select-none cursor-default"
 				on:mouseenter={() => (showMoreInformation = true)}

web/src/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -1,32 +1,9 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
-	export let isCollapsed = true;
-	let innerWidth: number;
-
-	const handleResize = () => {
-		if (innerWidth > 768) {
-			isCollapsed = false;
-		} else {
-			isCollapsed = true;
-		}
-	};
-
-	onMount(() => {
-		handleResize();
-	});
 </script>
 
-<svelte:window on:resize={handleResize} bind:innerWidth />
-
 <section
 	id="sidebar"
-	on:mouseover={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
-	on:focus={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
-	on:mouseleave={() => handleResize()}
-	class="flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-[width] duration-200 z-10 {isCollapsed
-		? 'w-[72px]'
-		: 'pr-6 w-64 shadow-2xl md:shadow-none md:border-none border-r dark:border-r-immich-dark-gray'}"
+	class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-[72px] md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray"
 >
 	<slot />
 </section>

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -14,8 +14,6 @@
 	import { locale } from '$lib/stores/preferences.store';
 	import SideBarSection from './side-bar-section.svelte';
 
-	let isCollapsed: boolean;
-
 	const getAssetCount = async () => {
 		const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
 		const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId();
@@ -74,7 +72,7 @@
 	};
 </script>
 
-<SideBarSection bind:isCollapsed>
+<SideBarSection>
 	<a
 		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
@@ -85,7 +83,6 @@
 			title="Photos"
 			logo={ImageOutline}
 			isSelected={$page.route.id === '/(user)/photos'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAssetCount()}
@@ -109,7 +106,6 @@
 			title="Explore"
 			logo={Magnify}
 			isSelected={$page.route.id === '/(user)/explore'}
-			{isCollapsed}
 		/>
 	</a>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
@@ -117,7 +113,6 @@
 			title="Sharing"
 			logo={AccountMultipleOutline}
 			isSelected={$page.route.id === '/(user)/sharing'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -131,18 +126,15 @@
 		</SideBarButton>
 	</a>
 
-	<div
-		class="text-xs md:pb-2 md:p-5 p-6 pb-[1.2rem] dark:text-immich-dark-fg transition-all duration-200"
-	>
-		<p class={isCollapsed ? 'hidden' : 'block'}>LIBRARY</p>
-		<hr class={isCollapsed ? 'block mt-2 mb-[0.45rem]' : 'hidden'} />
+	<div class="text-xs dark:text-immich-dark-fg transition-all duration-200">
+		<p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
+		<hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm:hidden" />
 	</div>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
 		<SideBarButton
 			title="Favorites"
 			logo={StarOutline}
 			isSelected={$page.route.id == '/(user)/favorites'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getFavoriteCount()}
@@ -160,7 +152,6 @@
 			title="Albums"
 			logo={ImageAlbum}
 			isSelected={$page.route.id === '/(user)/albums'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -178,7 +169,6 @@
 			title="Archive"
 			logo={ArchiveArrowDownOutline}
 			isSelected={$page.route.id === '/(user)/archive'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getArchivedAssetsCount()}
@@ -195,6 +185,6 @@
 
 	<!-- Status Box -->
 	<div class="mb-6 mt-auto">
-		<StatusBox {isCollapsed} />
+		<StatusBox />
 	</div>
 </SideBarSection>

web/src/lib/components/shared-components/status-box.svelte

@@ -12,8 +12,6 @@
 	let serverInfo: ServerInfoResponseDto;
 	let pingServerInterval: NodeJS.Timer;
 
-	export let isCollapsed: boolean;
-
 	onMount(async () => {
 		try {
 			const { data: version } = await api.serverInfoApi.getServerVersion();
@@ -54,32 +52,28 @@
 <div class="dark:text-immich-dark-fg">
 	<div class="storage-status grid grid-cols-[64px_auto]">
 		<div
-			class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed
-				? 'pb-[2.15rem]'
-				: ''}"
+			class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0"
 		>
 			<Cloud size={'24'} />
 		</div>
-		<div>
-			{#if !isCollapsed}
-				<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
-				{#if serverInfo}
-					<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
-						<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
-						<div
-							class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
-							style="width: {getStorageUsagePercentage()}%"
-						/>
-					</div>
-					<p class="text-xs">
-						{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
-						{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
-					</p>
-				{:else}
-					<div class="mt-2">
-						<LoadingSpinner />
-					</div>
-				{/if}
+		<div class="hidden md:block group-hover:sm:block">
+			<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
+			{#if serverInfo}
+				<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
+					<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
+					<div
+						class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
+						style="width: {getStorageUsagePercentage()}%"
+					/>
+				</div>
+				<p class="text-xs">
+					{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
+					{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
+				</p>
+			{:else}
+				<div class="mt-2">
+					<LoadingSpinner />
+				</div>
 			{/if}
 		</div>
 	</div>
@@ -88,34 +82,30 @@
 	</div>
 	<div class="server-status grid grid-cols-[64px_auto]">
 		<div
-			class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed
-				? 'pb-11'
-				: ''}"
+			class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0"
 		>
 			<Dns size={'24'} />
 		</div>
-		{#if !isCollapsed}
-			<div class="text-xs ">
-				<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
+		<div class="text-xs hidden md:block group-hover:sm:block">
+			<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
 
-				<div class="flex justify-items-center justify-between mt-2 ">
-					<p>Status</p>
+			<div class="flex justify-items-center justify-between mt-2 ">
+				<p>Status</p>
 
-					{#if isServerOk}
-						<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
-					{:else}
-						<p class="font-medium text-red-500">Offline</p>
-					{/if}
-				</div>
+				{#if isServerOk}
+					<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
+				{:else}
+					<p class="font-medium text-red-500">Offline</p>
+				{/if}
+			</div>
 
-				<div class="flex justify-items-center justify-between mt-2 ">
-					<p>Version</p>
-					<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-						{serverVersion}
-					</p>
-				</div>
+			<div class="flex justify-items-center justify-between mt-2 ">
+				<p>Version</p>
+				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
+					{serverVersion}
+				</p>
 			</div>
-		{/if}
+		</div>
 	</div>
 	<!-- <div>
 		<hr class="ml-5 my-4" />

web/src/lib/components/sharing-page/shared-album-list-tile.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <div
-	class="grid grid-cols-[75px_1fr] w-[550px] border-b border-gray-300 dark:border-immich-dark-gray place-items-center py-4  gap-6 transition-all hover:border-immich-primary dark:hover:border-immich-dark-primary"
+	class="grid grid-cols-[75px_1fr] w-full md:w-[500px] border-b border-gray-300 dark:border-immich-dark-gray place-items-center py-4  gap-6 transition-all hover:border-immich-primary dark:hover:border-immich-dark-primary"
 >
 	<div>
 		{#await loadImageData(album.albumThumbnailAssetId)}

web/src/routes/(user)/sharing/+page.svelte

@@ -36,25 +36,25 @@
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div class="flex" slot="buttons">
 		<LinkButton on:click={createSharedAlbum}>
-			<div class="flex place-items-center gap-1 text-sm">
-				<PlusBoxOutline size="18" />
-				Create shared album
+			<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
+				<PlusBoxOutline size="18" class="shrink-0" />
+				<span class="max-sm:text-xs leading-none">Create shared album</span>
 			</div>
 		</LinkButton>
 
 		<LinkButton on:click={() => goto('/sharing/sharedlinks')}>
-			<div class="flex place-items-center gap-1 text-sm">
-				<Link size="18" />
-				Shared links
+			<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
+				<Link size="18" class="shrink-0" />
+				<span class="max-sm:text-xs leading-none">Shared links</span>
 			</div>
 		</LinkButton>
 	</div>
 
 	<section>
 		<!-- Share Album List -->
-		<div class="w-full flex flex-col place-items-center">
+		<div class="md:w-full flex flex-col place-items-center">
 			{#each data.sharedAlbums as album}
-				<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
+				<a class="max-md:w-full" data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
 					<SharedAlbumListTile {album} user={data.user} />
 				</a>
 			{/each}
@@ -63,7 +63,7 @@
 		<!-- Empty List -->
 		{#if data.sharedAlbums.length === 0}
 			<div
-				class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
+				class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
 			>
 				<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
 				<p class="text-center text-immich-text-gray-500">

web/src/routes/admin/+layout.svelte

@@ -18,7 +18,6 @@
 	import type { LayoutData } from './$types';
 	import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
 
-	let isCollapsed: boolean;
 	export let data: LayoutData;
 
 	// Circumvents the need to import the page store. Should be replaced by
@@ -43,37 +42,33 @@
 
 <main>
 	<section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen">
-		<SideBarSection bind:isCollapsed>
+		<SideBarSection>
 			<SideBarButton
 				title="Users"
 				logo={AccountMultipleOutline}
 				isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
 				on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
-				{isCollapsed}
 			/>
 			<SideBarButton
 				title="Jobs"
 				logo={Sync}
 				isSelected={data.routeId === AppRoute.ADMIN_JOBS}
 				on:selected={() => goto(AppRoute.ADMIN_JOBS)}
-				{isCollapsed}
 			/>
 			<SideBarButton
 				title="Settings"
 				logo={Cog}
 				isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
 				on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
-				{isCollapsed}
 			/>
 			<SideBarButton
 				title="Server Stats"
 				logo={Server}
 				isSelected={data.routeId === AppRoute.ADMIN_STATS}
 				on:selected={() => goto(AppRoute.ADMIN_STATS)}
-				{isCollapsed}
 			/>
 			<div class="mb-6 mt-auto">
-				<StatusBox {isCollapsed} />
+				<StatusBox />
 			</div>
 		</SideBarSection>
 
@@ -85,8 +80,8 @@
 				<hr class="dark:border-immich-dark-gray" />
 			</div>
 
-			<section id="setting-content" class="flex place-content-center mx-2">
-				<section class="w-[800px] pt-5 pb-28">
+			<section id="setting-content" class="flex place-content-center mx-4">
+				<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
 					<slot />
 				</section>
 			</section>

web/src/routes/admin/user-management/+page.svelte

@@ -159,7 +159,7 @@
 		</FullScreenModal>
 	{/if}
 
-	<table class="text-left w-full my-5">
+	<table class="text-left w-full my-5 sm:block hidden">
 		<thead
 			class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
 		>
@@ -218,5 +218,66 @@
 		</tbody>
 	</table>
 
+	<table class="text-left w-full my-5 block sm:hidden">
+		<thead
+			class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
+		>
+			<tr class="flex w-full place-items-center">
+				<th class="text-center w-1/2 font-medium text-sm flex justify-around">
+					<span>Name</span>
+					<span>Email</span>
+				</th>
+				<th class="text-center w-1/2 font-medium text-sm">Action</th>
+			</tr>
+		</thead>
+		<tbody
+			class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray"
+		>
+			{#if allUsers}
+				{#each allUsers as user, i}
+					<tr
+						class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
+							isDeleted(user)
+								? 'bg-red-300 dark:bg-red-900'
+								: i % 2 == 0
+								? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+								: 'bg-immich-bg dark:bg-immich-dark-gray/50'
+						}`}
+					>
+						<td class="text-sm px-4 w-2/3 text-ellipsis">
+							<span>{user.firstName} {user.lastName}</span>
+							<span>{user.email}</span>
+						</td>
+						<td class="text-sm px-4 w-1/3 text-ellipsis">
+							{#if !isDeleted(user)}
+								<button
+									on:click={() => editUserHandler(user)}
+									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700  rounded-full sm:p-3 p-2 max-sm:mb-1 transition-all duration-150 hover:bg-immich-primary/75"
+								>
+									<PencilOutline size="16" />
+								</button>
+								<button
+									on:click={() => deleteUserHandler(user)}
+									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700  rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
+								>
+									<TrashCanOutline size="16" />
+								</button>
+							{/if}
+							{#if isDeleted(user)}
+								<button
+									on:click={() => restoreUserHandler(user)}
+									class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700  rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
+									title={`scheduled removal on ${getDeleteDate(user)}`}
+								>
+									<DeleteRestore size="16" />
+								</button>
+							{/if}
+						</td>
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+
 	<Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button>
 </section>