From 8bbe6350063aa998d74d9dee41d0e9fd9519f266 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 15 Nov 2020 08:00:28 +0300
Subject: feat: useMediaQuery in ContentSection

---
 src/lib/ContentSection/ContentSection.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx
index 3432bd5..f18684c 100644
--- a/src/lib/ContentSection/ContentSection.tsx
+++ b/src/lib/ContentSection/ContentSection.tsx
@@ -4,6 +4,8 @@ import {
   Typography,
   Divider,
   makeStyles,
+  useMediaQuery,
+  Theme,
 } from '@material-ui/core';
 
 
@@ -14,13 +16,19 @@ interface PropTypes {
 
 const useStyles = makeStyles(theme => ({
   content: {
-    padding: theme.spacing(2, 2, 1, 3),
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 2, 1, 3),
+    },
+    [theme.breakpoints.down('sm')]: {
+      padding: theme.spacing(2, 0),
+    },
     marginBottom: theme.spacing(1),
   },
 }));
 
 const ContentSection: React.FC<PropTypes> = ({ sectionName, children, level = 0 }) => {
   const classes = useStyles();
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
 
   let adjustedLevel = level + 2; // Make everything smaller
   if (adjustedLevel > 6) adjustedLevel = 6;
@@ -31,7 +39,7 @@ const ContentSection: React.FC<PropTypes> = ({ sectionName, children, level = 0
   return (
     <>
       <Typography variant={variant}>{sectionName}</Typography>
-      <Divider variant="middle" />
+      <Divider variant={isMobile ? 'fullWidth' : 'middle'} />
       <Typography component="div" className={classes.content}>
         {children}
       </Typography>
-- 
cgit v1.2.3