made fixed-with lab

src/layouts/LabLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { Sticky } from '~/components/containers/Sticky';
 import { Container } from '~/containers/main/Container';
@@ -11,27 +11,12 @@ import { LabStats } from '~/containers/lab/LabStats';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectLabList } from '~/redux/lab/selectors';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
-import { Superpower } from '~/components/boris/Superpower';
-import { Toggle } from '~/components/input/Toggle';
-import { usePersistedState } from '~/utils/hooks/usePersistedState';
-import classNames from 'classnames';
 
 interface IProps {}
 
-enum Layout {
-  Fluid = 'fluid',
-  Default = 'default',
-}
-
 const LabLayout: FC<IProps> = () => {
   const { is_loading } = useShallowSelect(selectLabList);
   const dispatch = useDispatch();
-  const [layout, setLayout] = usePersistedState('lab_layout', Layout.Default);
-
-  const isFluid = layout === Layout.Fluid;
-  const toggleLayout = useCallback(() => {
-    setLayout(isFluid ? Layout.Default : Layout.Fluid);
-  }, [setLayout, isFluid]);
 
   useEffect(() => {
     dispatch(labGetList());
@@ -40,7 +25,7 @@ const LabLayout: FC<IProps> = () => {
 
   return (
     <div>
-      <div className={classNames(styles.container, { [styles.fluid]: isFluid })}>
+      <Container>
         <div className={styles.wrap}>
           <Group className={styles.content}>
             <LabHead isLoading={is_loading} />
@@ -53,7 +38,7 @@ const LabLayout: FC<IProps> = () => {
             </Sticky>
           </div>
         </div>
-      </div>
+      </Container>
 
       <SidebarRouter prefix="/lab" isLab />
     </div>

src/layouts/LabLayout/styles.module.scss

@@ -1,13 +1,5 @@
 @import "~/styles/variables.scss";
 
-@mixin fluid {
-  @media(min-width: $content_width) {
-    .fluid & {
-      @content
-    }
-  }
-}
-
 .wrap {
   display: grid;
   grid-template-columns: 3fr 1fr;
@@ -18,11 +10,6 @@
     grid-auto-flow: row;
     padding: 0 $gap / 2;
   }
-
-  @include fluid {
-    grid-template-columns: 3fr $cell;
-    padding: 0 $gap;
-  }
 }
 
 .panel {
@@ -37,20 +24,3 @@
     margin: 0 $gap $gap 0;
   }
 }
-
-.toggles {
-  padding: $gap;
-}
-
-.container {
-  width: 100%;
-  max-width: $content_width;
-
-  &.fluid {
-    max-width: 100vw;
-  }
-}
-
-.content {
-  min-width: 0;
-}