From b7a8e3366579acbc2070a91cbf6c98ec5641f1ef Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 21 Sep 2024 06:31:16 +0530
Subject: [PATCH] Tweak

---
 .../new/photos/components/Gallery/ListHeader.tsx      | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/packages/new/photos/components/Gallery/ListHeader.tsx b/web/packages/new/photos/components/Gallery/ListHeader.tsx
index e60d704509..e7b053f4d4 100644
--- a/web/packages/new/photos/components/Gallery/ListHeader.tsx
+++ b/web/packages/new/photos/components/Gallery/ListHeader.tsx
@@ -1,11 +1,13 @@
-import { FlexWrapper } from "@ente/shared/components/Container";
-import { Box, styled, Typography } from "@mui/material";
+import { Box, Stack, styled, Typography } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
 
 interface GalleryItemsSummaryProps {
+    /** The name / title for the items that are being shown. */
     name: string;
+    /** The number of items being shown. */
     fileCount: number;
+    /** An element (usually an icon) placed after the file count. */
     endIcon?: React.ReactNode;
 }
 
@@ -22,19 +24,18 @@ export const GalleryItemsSummary: React.FC<GalleryItemsSummaryProps> = ({
         <div>
             <Typography variant="h3">{name}</Typography>
 
-            <FlexWrapper>
+            <Stack direction="row" gap={1.5}>
                 <Typography variant="small" color="text.muted">
                     {t("photos_count", { count: fileCount })}
                 </Typography>
                 {endIcon && (
                     <Box
                         sx={{ svg: { fontSize: "17px", color: "text.muted" } }}
-                        ml={1.5}
                     >
                         {endIcon}
                     </Box>
                 )}
-            </FlexWrapper>
+            </Stack>
         </div>
     );
 };