From cbe7407c145063e9c126d0a11768fec6baf29c57 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:19:40 +0530
Subject: [PATCH] Dup

---
 web/packages/base/components/mui/Container.tsx     | 14 ++++++++++++++
 web/packages/base/components/mui/SidebarDrawer.tsx | 10 +++-------
 web/packages/new/photos/components/mui/index.tsx   |  2 ++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/packages/base/components/mui/Container.tsx b/web/packages/base/components/mui/Container.tsx
index 45e6e2913e..d985fc033a 100644
--- a/web/packages/base/components/mui/Container.tsx
+++ b/web/packages/base/components/mui/Container.tsx
@@ -1,5 +1,19 @@
 import { styled } from "@mui/material";
 
+/**
+ * A flexbox with justify content set to space-between and center alignment.
+ *
+ * There is also another SpaceBetweenFlex in the old shared package, but that
+ * one also sets width: 100%. As such, that one should be considered deprecated
+ * and its uses moved to this one when possible (so that we can then see where
+ * the width: 100% is essential).
+ */
+export const SpaceBetweenFlex = styled("div")`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
 /**
  * A flex child that fills the entire flex direction, and shows its children
  * after centering them both vertically and horizontally.
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 19a81bfbc9..e69cafce22 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -75,11 +75,11 @@ export const NestedSidebarDrawer: React.FC<
     );
 };
 
-import { FlexWrapper } from "@ente/shared/components/Container";
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import Close from "@mui/icons-material/Close";
 import { Box, IconButton, Typography } from "@mui/material";
 import React from "react";
+import { SpaceBetweenFlex } from "./Container";
 
 type SidebarDrawerTitlebarProps = Pick<
     NestedSidebarDrawerVisibilityProps,
@@ -109,11 +109,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
 }) => {
     return (
         <Stack sx={{ gap: "4px" }}>
-            <FlexWrapper
-                height={48}
-                alignItems={"center"}
-                justifyContent="space-between"
-            >
+            <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
                 <IconButton onClick={onClose} color={"primary"}>
                     <ArrowBack />
                 </IconButton>
@@ -123,7 +119,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
                         <Close />
                     </IconButton>
                 </Box>
-            </FlexWrapper>
+            </SpaceBetweenFlex>
             <Box py={0.5} px={2}>
                 <Typography variant="h3" fontWeight={"bold"}>
                     {title}
diff --git a/web/packages/new/photos/components/mui/index.tsx b/web/packages/new/photos/components/mui/index.tsx
index 735de83bd4..a3cd1d867c 100644
--- a/web/packages/new/photos/components/mui/index.tsx
+++ b/web/packages/new/photos/components/mui/index.tsx
@@ -19,6 +19,8 @@ export const FilledIconButton = styled(IconButton)(({ theme }) => ({
  * one also sets width: 100%. As such, that one should be considered deprecated
  * and its uses moved to this one when possible (so that we can then see where
  * the width: 100% is essential).
+ *
+ * TODO: Moved to base.
  */
 export const SpaceBetweenFlex = styled(Box)`
     display: flex;