fix: toast in mobile view (#831)

* fix: toast in mobile view

* fix: feature settings mobile view

* fix: feedback in mobile

* fix: add space for ts expect error

* fix: change breakpoint to xs instead of sm

frontend/src/common.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useCommonStyles = makeStyles(theme => ({
     contentSpacingY: {
@@ -24,12 +24,14 @@ export const useCommonStyles = makeStyles(theme => ({
     },
     divider: {
         margin: '1rem 0',
+        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
         height: '3px',
         width: '100%',
     },
     largeDivider: {
         margin: '2rem 0',
+        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
         height: '3px',
         width: '100%',
@@ -112,6 +114,11 @@ export const useCommonStyles = makeStyles(theme => ({
         right: '40px',
         top: '40px',
         transform: 'translateY(-400px)',
+        [theme.breakpoints.down('xs')]: {
+            right: 20,
+            left: 10,
+            top: 40,
+        },
     },
     fadeInTopEnter: {
         transform: 'translateY(100px)',

frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts

@@ -9,6 +9,10 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        [theme.breakpoints.down('xs')]: {
+            width: '50px',
+            height: '50px',
+        },
     },
     check: {
         color: '#fff',

frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts

@@ -2,11 +2,11 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     container: {
-        width: '450px',
+        maxWidth: '450px',
         background: '#fff',
         boxShadow: '2px 2px 4px rgba(0,0,0,0.4)',
         zIndex: 500,
-        margin: '0 auto',
+        margin: '0 0.8rem',
         borderRadius: '12.5px',
         padding: '2rem',
     },

frontend/src/component/feature/FeatureForm/FeatureForm.tsx

@@ -140,7 +140,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                     data-test={CF_DESC_ID}
                     onChange={e => setDescription(e.target.value)}
                 />
-                <FormControl>
+                <FormControl className={styles.input}>
                     <Typography
                         variant="subtitle1"
                         className={styles.roleSubtitle}

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts

@@ -11,6 +11,9 @@ export const useStyles = makeStyles(theme => ({
         width: '20%',
         borderRight: `1px solid ${theme.palette.grey[300]}`,
         padding: '1rem 0',
+        [theme.breakpoints.down('sm')]: {
+            width: '35%',
+        },
     },
     listItem: {
         padding: '0.75rem 2rem',

frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts

@@ -8,8 +8,6 @@ export const useStyles = makeStyles(theme => ({
         boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)',
         padding: '1.5rem',
         maxWidth: '400px',
-        width: '400px',
-        height: '200px',
     },
     animateContainer: {
         zIndex: 9999,