Dup

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.

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}

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;