From 80967ddfac39cd917adbfd55dbceced302a4d15b Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 22 Mar 2021 11:13:03 +0700
Subject: [PATCH] #23 fixed lab layout on tablets

---
 src/components/lab/LabHead/index.tsx            |  8 +++++---
 src/components/lab/LabHead/styles.module.scss   | 13 +++++++++++++
 src/containers/lab/LabLayout/styles.module.scss |  5 +++++
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/components/lab/LabHead/styles.module.scss

diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx
index 25fb6cfd..87bfa1ca 100644
--- a/src/components/lab/LabHead/index.tsx
+++ b/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>
 );
 
diff --git a/src/components/lab/LabHead/styles.module.scss b/src/components/lab/LabHead/styles.module.scss
new file mode 100644
index 00000000..6ba6a4b5
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/containers/lab/LabLayout/styles.module.scss b/src/containers/lab/LabLayout/styles.module.scss
index ee69442c..699756e3 100644
--- a/src/containers/lab/LabLayout/styles.module.scss
+++ b/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 {