Prevent layout shift on mobile

2024-10-11 19:14:20 +05:30
parent 04b61ddb21
commit d1a202fd8b
1 changed files with 14 additions and 10 deletions
--- 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>
    );