From d1a202fd8bd6c441cee63564da51bf915ed27d42 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 11 Oct 2024 19:14:20 +0530
Subject: [PATCH] Prevent layout shift on mobile

---
 .../new/photos/components/gallery/BarImpl.tsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/packages/new/photos/components/gallery/BarImpl.tsx b/web/packages/new/photos/components/gallery/BarImpl.tsx
index e7607793cb..382b067652 100644
--- a/web/packages/new/photos/components/gallery/BarImpl.tsx
+++ b/web/packages/new/photos/components/gallery/BarImpl.tsx
@@ -226,16 +226,20 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
         ],
     );
 
-    const controls1 = isMobile && mode != "people" && (
-        <Box display="flex" alignItems={"center"} gap={1}>
-            <CollectionsSortOptions
-                activeSortBy={collectionsSortBy}
-                onChangeSortBy={onChangeCollectionsSortBy}
-                disableTriggerButtonBackground
-            />
-            <IconButton onClick={onShowAllCollections}>
-                <ExpandMore />
-            </IconButton>
+    const controls1 = isMobile && (
+        <Box display="flex" alignItems={"center"} gap={1} minHeight={"64px"}>
+            {mode != "people" && (
+                <>
+                    <CollectionsSortOptions
+                        activeSortBy={collectionsSortBy}
+                        onChangeSortBy={onChangeCollectionsSortBy}
+                        disableTriggerButtonBackground
+                    />
+                    <IconButton onClick={onShowAllCollections}>
+                        <ExpandMore />
+                    </IconButton>
+                </>
+            )}
         </Box>
     );