fix: wrapping long item name (#786)

* style: wrapping long item name * style: use grid from responsive cases and box instead of div
graasp · Sep 13, 2023 · d0add75 · d0add75
1 parent 0f02a64
commit d0add75
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
     <title>Graasp Builder</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" style="width: 100%;"></div>
     <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
@@ -3,7 +3,7 @@ import { Box, Divider, Typography, styled } from '@mui/material';
 import { ItemRecord } from '@graasp/sdk/frontend';
 import { DrawerHeader } from '@graasp/ui';
 
-import { RIGHT_MENU_WIDTH } from '../../config/constants';
+import { DRAWER_WIDTH, RIGHT_MENU_WIDTH } from '../../config/constants';
 import { useBuilderTranslation } from '../../config/i18n';
 import { ITEM_MAIN_CLASS } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
@@ -13,6 +13,10 @@ import ItemMetadataContent from './ItemMetadataContent';
 import ItemPanel from './ItemPanel';
 import ItemHeader from './header/ItemHeader';
 
+const Container = styled(Box)<{ open: boolean }>(({ open }) => ({
+  width: open ? `calc(100vw - ${DRAWER_WIDTH})` : '100vw',
+}));
+
 const StyledContainer = styled(Box)<{ open: boolean }>(({ theme, open }) => {
   const openStyles = open
     ? {
@@ -58,10 +62,11 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
     setIsItemMetadataMenuOpen,
     isChatboxMenuOpen,
     setIsChatboxMenuOpen,
+    isMainMenuOpen,
   } = useLayoutContext();
 
   return (
-    <div id={id} className={ITEM_MAIN_CLASS}>
+    <Container id={id} className={ITEM_MAIN_CLASS} open={isMainMenuOpen}>
       {isChatboxMenuOpen && (
         <ItemPanel open={isChatboxMenuOpen}>
           <DrawerHeader
@@ -100,7 +105,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
 
         {children}
       </StyledContainer>
-    </div>
+    </Container>
   );
 };
 

diff --git a/src/components/main/ItemsToolbar.tsx b/src/components/main/ItemsToolbar.tsx
@@ -1,21 +1,23 @@
-import { Box, Stack, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from '@mui/material';
 
 type Props = {
   title: string;
   headerElements?: JSX.Element[];
 };
 
 const ItemsToolbar = ({ title, headerElements }: Props): JSX.Element => (
-  <Stack direction="row" justifyContent="space-between" spacing={1}>
-    <Box>
-      <Typography variant="h4" noWrap>
+  <Grid container spacing={2}>
+    <Grid item xs={6}>
+      <Typography variant="h4" sx={{ wordWrap: 'break-word' }}>
         {title}
       </Typography>
-    </Box>
-    <Stack direction="row" alignItems="center" justifyContent="flex-end">
-      {headerElements}
-    </Stack>
-  </Stack>
+    </Grid>
+    <Grid item xs={6}>
+      <Stack direction="row" alignItems="center" justifyContent="flex-end">
+        {headerElements}
+      </Stack>
+    </Grid>
+  </Grid>
 );
 
 export default ItemsToolbar;