fix(style): Fixed overflow not overflowing on pages

scottbenton · Dec 16, 2023 · a4d7e1b · a4d7e1b
1 parent 58e8157
commit a4d7e1b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/components/shared/Layout/PageContent.tsx b/src/components/shared/Layout/PageContent.tsx
@@ -21,7 +21,6 @@ export function PageContent(props: PageContentProps) {
           borderRadius: isPaper ? `${theme.shape.borderRadius}px` : 0,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
-          overflow: "clip",
           flexGrow: 1,
 
           pb: 2,

diff --git a/src/components/shared/StyledTabs/StyledTabs.tsx b/src/components/shared/StyledTabs/StyledTabs.tsx
@@ -3,6 +3,7 @@ import { Tabs, TabsProps } from "@mui/material";
 export interface StyledTabsProps extends TabsProps {}
 
 export function StyledTabs(props: StyledTabsProps) {
+  const { sx, ...otherProps } = props;
   return (
     <Tabs
       TabIndicatorProps={{
@@ -21,16 +22,19 @@ export function StyledTabs(props: StyledTabsProps) {
           alignSelf: "stretch",
         },
       }}
-      sx={(theme) => ({
-        py: 0,
-        backgroundColor: theme.palette.background.paperInlay,
-        borderBottom: `1px solid ${theme.palette.divider}`,
-        alignItems: "center",
-      })}
+      sx={[
+        (theme) => ({
+          py: 0,
+          backgroundColor: theme.palette.background.paperInlay,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          alignItems: "center",
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
       variant={"scrollable"}
       scrollButtons
       allowScrollButtonsMobile
-      {...props}
+      {...otherProps}
     />
   );
 }
diff --git a/src/pages/Homebrew/HomebrewEditorPage/HomebrewEditorPage.tsx b/src/pages/Homebrew/HomebrewEditorPage/HomebrewEditorPage.tsx
@@ -35,6 +35,10 @@ export function HomebrewEditorPage() {
           <StyledTabs
             value={selectedTab}
             onChange={(evt, value) => handleTabChange(value)}
+            sx={(theme) => ({
+              borderTopRightRadius: theme.shape.borderRadius,
+              borderTopLeftRadius: theme.shape.borderRadius,
+            })}
           >
             <StyledTab label={"About"} value={TABS.ABOUT} />
             <StyledTab label={"Moves"} value={TABS.MOVES} />

diff --git a/src/pages/World/WorldSheetPage/WorldSheetPage.tsx b/src/pages/World/WorldSheetPage/WorldSheetPage.tsx
@@ -121,6 +121,10 @@ export function WorldSheetPage() {
             indicatorColor="primary"
             centered
             variant={"standard"}
+            sx={(theme) => ({
+              borderTopRightRadius: theme.shape.borderRadius,
+              borderTopLeftRadius: theme.shape.borderRadius,
+            })}
           >
             <StyledTab value={TABS.DETAILS} label={"World Details"} />
             {!showSectorsInsteadOfLocations && (