From 0e954a2463720ff30e48e006a37d1b094a2f803f Mon Sep 17 00:00:00 2001
From: Fabian Vives <f.vives99@gmail.com>
Date: Mon, 10 Oct 2022 16:17:36 -0600
Subject: [PATCH 1/2] fix(webapp): correct card dimensions for mobile

---
 .../src/routes/RewardsDistribution/index.js   |  4 ++--
 .../src/routes/RewardsDistribution/styles.js  | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/webapp/src/routes/RewardsDistribution/index.js b/webapp/src/routes/RewardsDistribution/index.js
index 6260c6e3..db57cef3 100644
--- a/webapp/src/routes/RewardsDistribution/index.js
+++ b/webapp/src/routes/RewardsDistribution/index.js
@@ -244,8 +244,8 @@ const RewardsDistribution = () => {
         </Box>
       </Popover>
       {loading && <LinearProgress className={classes.linearLoader} />}
-      <div className={classes.flexdad}>
-        <div className={classes.mainReward}>
+      <div className={classes.topCard}>
+        <div className={classes.mainCard}>
           <Card className={classes.cardShadow}>
             <CardContent>
               <Typography variant="h6">{t('dailyRewards')}</Typography>
diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js
index 44676b8d..eb96f23d 100644
--- a/webapp/src/routes/RewardsDistribution/styles.js
+++ b/webapp/src/routes/RewardsDistribution/styles.js
@@ -48,26 +48,40 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
   mapWrapper: {
     marginTop: theme.spacing(3)
     },
-  flexdad: {
+  topCard: {
     flexDirection: 'row',
     display: 'flex',
+    [theme.breakpoints.down('md')]: {
+      display:'block',
+      paddingTop: '5px'
+    }
   },
   rewardsdiv: {
     flexGrow: 1,
     marginLeft: 10,
+    [theme.breakpoints.down('md')]: {
+      marginLeft: 0,
+      padding: '5px',
+      margin: '5px'
+    }
   },
-  mainReward: {
+  mainCard: {
     flexGrow: 1,
+    [theme.breakpoints.down('md')]: {
+      marginLeft: 0,
+      padding: '5px',
+      margin: '5px'
+    }
   },
   root: {
     '& .MuiPaper-root': {
-      boxShadow: '0px 0px 14px rgba(53, 64, 82, 0.35) !important',
+      boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
     },
   },
   boxPadding: {
     padding: '10px',
   },
   cardShadow: {
-    boxShadow: '0px 0px 14px rgba(53, 64, 82, 0.35) !important',
+    boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
   },
 })

From 9c1f79d9212a71e63669430203ea70cf93a1c6b2 Mon Sep 17 00:00:00 2001
From: codefactor-io <support@codefactor.io>
Date: Mon, 10 Oct 2022 22:21:27 +0000
Subject: [PATCH 2/2] [CodeFactor] Apply fixes

---
 webapp/src/routes/RewardsDistribution/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js
index eb96f23d..3265ac53 100644
--- a/webapp/src/routes/RewardsDistribution/styles.js
+++ b/webapp/src/routes/RewardsDistribution/styles.js
@@ -52,7 +52,7 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     flexDirection: 'row',
     display: 'flex',
     [theme.breakpoints.down('md')]: {
-      display:'block',
+      display: 'block',
       paddingTop: '5px'
     }
   },