Merge pull request #3897 from LiteFarmOrg/LF-4948-snackbar-should-be-full-width-and-centered-on-mobile

Lf 4948 snackbar should be full width and centered on mobile

Author: kathyavini

packages/webapp/src/App.jsx

@@ -49,8 +49,11 @@ function App() {
                 horizontal: 'center',
               }}
               classes={{
-                root: clsx(styles.root, isCompactSideMenu ? styles.isCompact : styles.isExpanded),
-                containerRoot: styles[`containerRoot${isCompactSideMenu ? 'WithCompactMenu' : ''}`],
+                root: clsx(styles.root, isCompactSideMenu && styles.compactRoot),
+                containerRoot: clsx(
+                  styles.containerRoot,
+                  isCompactSideMenu && styles.compactContainerRoot,
+                ),
               }}
               // https://notistack.com/features/customization#custom-component
               Components={{ common: NotistackSnackbar }}

packages/webapp/src/assets/variables.scss

@@ -8,11 +8,10 @@
     --global-compact-side-menu-width: 80px;
     // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding
     --global-multi-step-task-layout-aggregated-height: 249px;
-}
 
-@include xs-breakpoint {
-    :root {
+    @include xs-breakpoint {
         --global-navbar-height: 55px;
         --global-side-menu-width: 0px;
+        --global-compact-side-menu-width: 0px;
     }
 }

packages/webapp/src/components/Navigation/SideMenu/index.jsx

@@ -215,12 +215,14 @@ const PureSideMenu = ({
 
   useLayoutEffect(() => {
     const rootElement = document.querySelector(':root');
-    if (selectedLanguage.includes('ml')) {
+    if (isMobile) {
+      rootElement.style.setProperty('--global-side-menu-width', '0px');
+    } else if (selectedLanguage.includes('ml')) {
       rootElement.style.setProperty('--global-side-menu-width', '224px');
     } else {
       rootElement.style.setProperty('--global-side-menu-width', '188px');
     }
-  }, [selectedLanguage]);
+  }, [selectedLanguage, isMobile]);
 
   const toggleSideMenu = () => {
     setHasBeenExpanded(isCompact);

packages/webapp/src/styles.module.scss

@@ -37,23 +37,21 @@
     max-width: 100%;
   }
 
-  @include sm-breakpoint {
-    .containerRoot {
-      left: calc((100vw - var(--global-side-menu-width)) / 2 + var(--global-side-menu-width));
-    }
-    .containerRootWithCompactMenu {
+  .containerRoot {
+    align-items: center;
+    left: calc((100vw - var(--global-side-menu-width)) / 2 + var(--global-side-menu-width));
+
+    &.compactContainerRoot {
       left: calc((100vw - var(--global-compact-side-menu-width)) / 2 + var(--global-compact-side-menu-width));
-    }
+    } 
   }
 
   .root {
     max-width: calc(1024px - 48px);
+    width: calc((100vw - var(--global-side-menu-width)) - 48px);
 
-    &.isCompact {
+    &.compactRoot {
       width: calc((100vw - var(--global-compact-side-menu-width)) - 48px);
     }
-    &.isExpanded {
-      width: calc((100vw - var(--global-side-menu-width)) - 48px);
-    }
   }
 }