trainer responsive styles completed

mavv-coder · mavv-coder · commit b6cce7f0b5ca · 2020-11-18T13:10:55.000+01:00
diff --git a/front/src/pods/student/student.styles.ts b/front/src/pods/student/student.styles.ts
@@ -3,8 +3,12 @@ import { theme } from 'core/theme';
 const { typography, spacing, palette } = theme;
 
 export const mainContainer = css`
-  width: 80%;
+  width: 60%;
   margin: ${spacing(80)} auto;
+
+  @media (max-width: 728px) {
+    width: 80%;
+  }
 `;
 
 export const studentBoard = css`
diff --git a/front/src/pods/trainer/components/header.styles.ts b/front/src/pods/trainer/components/header.styles.ts
@@ -30,7 +30,9 @@ export const inputIconContainer = css`
 
 export const textArea = css`
   font-family: ${typography.fontFamily};
+  min-width: 0;
   color: ${palette.text.primary};
+  margin-right: 0;
   border: 2px solid #ccc;
   border-top-left-radius: 0.4rem;
   border-bottom-left-radius: 0.4rem;
@@ -46,11 +48,18 @@ export const textArea = css`
   &::selection {
     background: #ccc;
   }
-  margin-right: 0%;
+
+  @media (max-width: 380px) {
+    font-size: 14px;
+    padding: 16px;
+  }
 `;
 
 export const copyIcon = css`
   font-size: 30px;
+  @media (max-width: 380px) {
+    font-size: 26px;
+  }
 `;
 
 export const copyBtn = css`
@@ -71,4 +80,9 @@ export const copyBtn = css`
   &:active {
     background-color: #fff;
   }
+
+  @media (max-width: 380px) {
+    height: 52px;
+    width: 52px;
+  }
 `;
diff --git a/front/src/pods/trainer/components/new-text.styles.ts b/front/src/pods/trainer/components/new-text.styles.ts
@@ -17,6 +17,7 @@ export const labelTextarea = css`
 export const editTextArea = css`
   box-sizing: border-box;
   font-size: 16px;
+  white-space: nowrap;
   width: 100%;
   margin-bottom: ${spacing(20)};
   margin-top: ${spacing(10)};
diff --git a/front/src/pods/trainer/components/session.styles.ts b/front/src/pods/trainer/components/session.styles.ts
@@ -11,6 +11,7 @@ export const studentBoard = css`
   box-sizing: border-box;
   font-size: 16px;
   width: 100%;
+  white-space: nowrap;
   margin-bottom: ${spacing(10)};
   margin-top: ${spacing(10)};
   padding: ${spacing(16)};
@@ -54,6 +55,9 @@ export const sendBtn = css`
 export const sendIcon = css`
   font-size: 20px;
   margin-left: 10px;
+  @media (max-width: 380px) {
+    display: none;
+  }
 `;
 
 export const undoBtn = css`
@@ -80,6 +84,9 @@ export const undoBtn = css`
 export const undoIcon = css`
   font-size: 20px;
   margin-right: 10px;
+  @media (max-width: 380px) {
+    display: none;
+  }
 `;
 
 export const labelTextarea = css`
diff --git a/front/src/pods/trainer/trainer.styles.ts b/front/src/pods/trainer/trainer.styles.ts
@@ -11,4 +11,8 @@ export const backgroundContainer = css`
 export const content = css`
   width: 60%;
   margin: 0px auto 0 auto;
+
+  @media (max-width: 728px) {
+    width: 80%;
+  }
 `;
