#23 fixed lab layout on tablets

src/components/lab/LabHead/index.tsx

@@ -3,12 +3,14 @@ import { Group } from '~/components/containers/Group';
 import { Card } from '~/components/containers/Card';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { Filler } from '~/components/containers/Filler';
+import styles from './styles.module.scss';
+import { Grid } from '~/components/containers/Grid';
 
 interface IProps {}
 
 const LabHead: FC<IProps> = () => (
-  <Card>
-    <Group horizontal>
+  <Card className={styles.wrap}>
+    <div className={styles.group}>
       <Group horizontal style={{ flex: '0 0 auto' }}>
         <Placeholder width="32px" height={32} />
         <Placeholder width="96px" height={18} />
@@ -25,7 +27,7 @@ const LabHead: FC<IProps> = () => (
       </Group>
 
       <Filler />
-    </Group>
+    </div>
   </Card>
 );
 

src/components/lab/LabHead/styles.module.scss

@@ -0,0 +1,13 @@
+@import "~/styles/variables.scss";
+
+.group {
+  display: flex;
+
+  @include tablet {
+    flex-wrap: wrap;
+  }
+
+  & > * {
+    margin: $gap / 2;
+  }
+}

src/containers/lab/LabLayout/styles.module.scss

@@ -4,6 +4,11 @@
   display: grid;
   grid-template-columns: 3fr 1fr;
   column-gap: $gap;
+
+  @include tablet {
+    grid-template-columns: 1fr;
+    grid-auto-flow: row;
+  }
 }
 
 .panel {