From 8705aa57b9c462ae8f33e2f4d39a2c28bbf8f891 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hubert=20Leg=C4=99=C4=87?= <hubert.legec@gmail.com>
Date: Sun, 8 Nov 2020 22:14:40 +0100
Subject: [PATCH] Get rid of horizontal scroll on reporting page

---
 .../RegistrationPage.desktop.tsx              |  6 +-
 .../reportingPage/ReportingPage.desktop.scss  |  2 +
 .../reportingPage/ReportingPage.desktop.tsx   | 62 ++++++++++---------
 .../reportingFilters/ReportingFilters.tsx     |  8 +--
 .../workLogSelector/WorkLogSelector.scss      |  3 +-
 5 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/components/registrationPage/RegistrationPage.desktop.tsx b/src/components/registrationPage/RegistrationPage.desktop.tsx
index 57b5745..45d9849 100644
--- a/src/components/registrationPage/RegistrationPage.desktop.tsx
+++ b/src/components/registrationPage/RegistrationPage.desktop.tsx
@@ -55,14 +55,14 @@ export const RegistrationPageDesktop = () => {
   return (
       <div className='registration-page'>
         <Grid container justify='center' spacing={3}>
-          <Grid item lg={10} md={11} xs={11}>
+          <Grid item lg={10} xs={11}>
             <div className='registration-page__header'>
               <span>Report your time</span> using our expression language, to make it quick!
               <RulesDialog/>
             </div>
             <Divider variant='fullWidth'/>
           </Grid>
-          <Grid item lg={10} md={11} xs={11}>
+          <Grid item lg={10} xs={11}>
             <WorkLogInput onChange={onWorkLogInputChange}
                           onSave={onSaveWorkLog}
                           workLog={workLog}
@@ -70,7 +70,7 @@ export const RegistrationPageDesktop = () => {
                           presets={presets}
                           autoAddedTagsMapping={AUTO_ADDED_TAGS_MAPPING}/>
           </Grid>
-          <Grid item lg={10} md={11} xs={11}>
+          <Grid item lg={10} xs={11}>
             {days && !isEmpty(workLogs) ?
                 <RegistrationPageMonth selectedMonth={new Month(selectedMonth.year, selectedMonth.month)}
                                        selectedDays={workLog.days}
diff --git a/src/components/reportingPage/ReportingPage.desktop.scss b/src/components/reportingPage/ReportingPage.desktop.scss
index ca6ca9c..f2129bb 100644
--- a/src/components/reportingPage/ReportingPage.desktop.scss
+++ b/src/components/reportingPage/ReportingPage.desktop.scss
@@ -1,4 +1,6 @@
 .reporting-page {
+  padding: 12px;
+
   .header {
     display: flex;
     justify-content: space-between;
diff --git a/src/components/reportingPage/ReportingPage.desktop.tsx b/src/components/reportingPage/ReportingPage.desktop.tsx
index 4c12d71..642cf51 100644
--- a/src/components/reportingPage/ReportingPage.desktop.tsx
+++ b/src/components/reportingPage/ReportingPage.desktop.tsx
@@ -30,7 +30,7 @@ interface ReportProps {
   tags: string[];
   username: string;
   workLogs: ReportingWorkLog[];
-  selection: {employees: string[], tags: string[]},
+  selection: { employees: string[], tags: string[] },
   onRemoveWorkLog: (id: string) => void;
   onEditWorkLog: (w: EditedWorkLog) => void;
 }
@@ -41,6 +41,7 @@ const Report = ({days, tags, username, onRemoveWorkLog, onEditWorkLog, workLogs,
     TABLE,
     PROJECTS
   }
+
   const [reportType, setReportType] = useState(ReportType.CALENDAR);
 
   const workLogsForSelectedUsersAndTags: { [username: string]: WorkLog[]; } = chain(workLogs)
@@ -56,28 +57,27 @@ const Report = ({days, tags, username, onRemoveWorkLog, onEditWorkLog, workLogs,
       .filter(tagsFilter(selection.tags));
 
   return (
-      <Grid item container lg={10} xs={11}>
-        <Paper className='reporting-page__report report'>
-          <Tabs value={reportType}
-                onChange={() => {}}
-                variant='fullWidth'
-                indicatorColor='primary'
-                textColor='primary'
-                className='report__tabs'>
-            <Tab icon={<CalendarIcon/>} onClick={() => setReportType(ReportType.CALENDAR)} data-testid='calendar-tab'/>
-            <Tab icon={<ListIcon/>} onClick={() => setReportType(ReportType.TABLE)} data-testid='table-tab'/>
-            <Tab icon={<ChartIcon/>} onClick={() => setReportType(ReportType.PROJECTS)} data-testid='projects-tab'/>
-          </Tabs>
-          {reportType === ReportType.CALENDAR && <MonthlyReport days={days} workLogs={workLogsForSelectedUsersAndTags}/>}
-          {reportType === ReportType.TABLE && <TableReport workLogs={filteredWorkLogs}
-                                                           tags={tags}
-                                                           onRemoveWorkLog={onRemoveWorkLog}
-                                                           onEditWorkLog={onEditWorkLog}
-                                                           username={username}/>
-          }
-          {reportType === ReportType.PROJECTS && <ProjectsReport workLogs={filteredWorkLogs}/>}
-        </Paper>
-      </Grid>
+      <Paper className='reporting-page__report report'>
+        <Tabs value={reportType}
+              onChange={() => {
+              }}
+              variant='fullWidth'
+              indicatorColor='primary'
+              textColor='primary'
+              className='report__tabs'>
+          <Tab icon={<CalendarIcon/>} onClick={() => setReportType(ReportType.CALENDAR)} data-testid='calendar-tab'/>
+          <Tab icon={<ListIcon/>} onClick={() => setReportType(ReportType.TABLE)} data-testid='table-tab'/>
+          <Tab icon={<ChartIcon/>} onClick={() => setReportType(ReportType.PROJECTS)} data-testid='projects-tab'/>
+        </Tabs>
+        {reportType === ReportType.CALENDAR && <MonthlyReport days={days} workLogs={workLogsForSelectedUsersAndTags}/>}
+        {reportType === ReportType.TABLE && <TableReport workLogs={filteredWorkLogs}
+                                                         tags={tags}
+                                                         onRemoveWorkLog={onRemoveWorkLog}
+                                                         onEditWorkLog={onEditWorkLog}
+                                                         username={username}/>
+        }
+        {reportType === ReportType.PROJECTS && <ProjectsReport workLogs={filteredWorkLogs}/>}
+      </Paper>
   );
 }
 
@@ -119,13 +119,15 @@ export const ReportingPageDesktop = () => {
                             selection={selection}
                             employeesFilter={employeesFilter(selection.employees)}
                             tagsFilter={tagsFilter(selection.tags)}/>
-          <Report days={days}
-                  tags={tags}
-                  username={username}
-                  selection={selection}
-                  workLogs={workLogs}
-                  onRemoveWorkLog={id => dispatch(removeWorkLogAction(id))}
-                  onEditWorkLog={w => dispatch(updateWorkLogAction(w.id, w.projectNames, w.workload))} />
+          <Grid item lg={10} xs={11}>
+            <Report days={days}
+                    tags={tags}
+                    username={username}
+                    selection={selection}
+                    workLogs={workLogs}
+                    onRemoveWorkLog={id => dispatch(removeWorkLogAction(id))}
+                    onEditWorkLog={w => dispatch(updateWorkLogAction(w.id, w.projectNames, w.workload))}/>
+          </Grid>
         </Grid>
       </div>
   );
diff --git a/src/components/reportingPage/reportingFilters/ReportingFilters.tsx b/src/components/reportingPage/reportingFilters/ReportingFilters.tsx
index 787c13b..4229dbe 100644
--- a/src/components/reportingPage/reportingFilters/ReportingFilters.tsx
+++ b/src/components/reportingPage/reportingFilters/ReportingFilters.tsx
@@ -21,11 +21,11 @@ interface ReportingFiltersProps {
 }
 
 export const ReportingFilters = ({workLogs, selection, onTagsChange, onEmployeesChange, onMonthChange, employeesFilter, tagsFilter}: ReportingFiltersProps) => (
-    <Grid item container lg={10} xs={11} spacing={4}>
-      <Grid item lg={2} sm={12}>
+    <Grid item container lg={10} xs={11} spacing={3}>
+      <Grid item lg={2} xs={11}>
         <MonthSelector selectedMonth={selection.month} onMonthChange={onMonthChange}/>
       </Grid>
-      <Grid item lg={5} sm={12} data-testid='projects-selector'>
+      <Grid item lg={5} xs={11} data-testid='projects-selector'>
         <WorkLogSelector title='Projects'
                          chipLabel={workLog => workLog.projectNames}
                          workLogs={workLogs}
@@ -33,7 +33,7 @@ export const ReportingFilters = ({workLogs, selection, onTagsChange, onEmployees
                          workLogFilter={employeesFilter}
                          onSelectionChange={onTagsChange}/>
       </Grid>
-      <Grid item lg={5} sm={12} data-testid='employees-selector'>
+      <Grid item lg={5} xs={11} data-testid='employees-selector'>
         <WorkLogSelector title='Employees'
                          chipLabel={workLog => workLog.employee}
                          workLogs={workLogs}
diff --git a/src/components/reportingPage/reportingFilters/workLogSelector/WorkLogSelector.scss b/src/components/reportingPage/reportingFilters/workLogSelector/WorkLogSelector.scss
index c5a034e..c239d66 100644
--- a/src/components/reportingPage/reportingFilters/workLogSelector/WorkLogSelector.scss
+++ b/src/components/reportingPage/reportingFilters/workLogSelector/WorkLogSelector.scss
@@ -17,7 +17,6 @@
       display: flex;
       align-items: center;
 
-
       &__label {
         margin-right: 8px;
         font-weight: bold;
@@ -30,4 +29,4 @@
     display: flex;
     justify-content: flex-end;
   }
-}
\ No newline at end of file
+}