From 86b3e3ee1392aa73712762c4a6b72851e5aab1df Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:33:20 +0200
Subject: [PATCH] fix(web): responsive design when selecting assets in an album
 (#11169)

fix: responsive design when selecting assets in an album
---
 .../components/photos-page/asset-select-control-bar.svelte | 7 ++++---
 .../components/shared-components/control-app-bar.svelte    | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-select-control-bar.svelte b/web/src/lib/components/photos-page/asset-select-control-bar.svelte
index 060aa89f19..c802c53454 100644
--- a/web/src/lib/components/photos-page/asset-select-control-bar.svelte
+++ b/web/src/lib/components/photos-page/asset-select-control-bar.svelte
@@ -31,8 +31,9 @@
 </script>
 
 <ControlAppBar on:close={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
-  <p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
-    {$t('selected_count', { values: { count: assets.size } })}
-  </p>
+  <div class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
+    <p class="block sm:hidden">{assets.size}</p>
+    <p class="hidden sm:block">{$t('selected_count', { values: { count: assets.size } })}</p>
+  </div>
   <slot slot="trailing" />
 </ControlAppBar>
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index a5693f011e..cf128104d1 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -54,11 +54,11 @@
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
   <div
     id="asset-selection-app-bar"
-    class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[15%_70%_15%] lg:grid-cols-[25%_50%_25%]  ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
+    class={`grid grid-cols-[10%_80%_10%] justify-between sm:grid-cols-[25%_50%_25%] lg:grid-cols-[25%_50%_25%]  ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
       forceDark && 'bg-immich-dark-gray text-white'
     }`}
   >
-    <div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
+    <div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg">
       {#if showBackButton}
         <CircleIconButton title={$t('close')} on:click={handleClose} icon={backIcon} size={'24'} class={buttonClass} />
       {/if}