From 26f0ea4cb5e030494f5593fcc81b7ac4f5459397 Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Tue, 15 Apr 2025 15:39:30 -0400
Subject: [PATCH] feat: responsive controlbar (#17601)

---
 .../shared-components/control-app-bar.svelte       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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 dbd8ca5a617..6b52adff100 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -69,9 +69,17 @@
 <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 ${multiRow ? 'grid-cols-[100%] md:grid-cols-[25%_50%_25%]' : 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]'} justify-between lg:grid-cols-[25%_50%_25%] ${appBarBorder} mx-2 my-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
-      forceDark && 'bg-immich-dark-gray text-white'
-    }`}
+    class={[
+      'grid',
+      multiRow && 'grid-cols-[100%] md:grid-cols-[25%_50%_25%]',
+      !multiRow && 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]',
+      'justify-between lg:grid-cols-[25%_50%_25%]',
+      appBarBorder,
+      'mx-2 my-2 place-items-center rounded-lg p-2 max-md:p-0 transition-all',
+      tailwindClasses,
+      'bg-immich-gray dark:bg-immich-dark-gray',
+      forceDark && 'bg-immich-dark-gray text-white',
+    ]}
   >
     <div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg">
       {#if showBackButton}