Revert "made fixed-with lab"

This reverts commit 9d5db844

src/layouts/LabLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { Sticky } from '~/components/containers/Sticky';
 import { Container } from '~/containers/main/Container';
@@ -11,12 +11,27 @@ 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());
@@ -25,7 +40,7 @@ const LabLayout: FC<IProps> = () => {
 
   return (
     <div>
-      <Container>
+      <div className={classNames(styles.container, { [styles.fluid]: isFluid })}>
         <div className={styles.wrap}>
           <Group className={styles.content}>
             <LabHead isLoading={is_loading} />
@@ -38,7 +53,7 @@ const LabLayout: FC<IProps> = () => {
             </Sticky>
           </div>
         </div>
-      </Container>
+      </div>
 
       <SidebarRouter prefix="/lab" isLab />
     </div>

src/layouts/LabLayout/styles.module.scss

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