Fixed: page extended past the edge of screen.

Author: MadOPcode

src/components/Content/styles.module.scss

@@ -4,7 +4,8 @@
   padding: 0 10px;
 
   @include desktop {
-    flex: 1 1 auto;
+    flex: 1 1 0;
     padding: 0 35px;
+    min-width: 0;
   }
 }

src/components/SelectField/styles.module.scss

@@ -104,14 +104,16 @@
 
 .medium {
   :global(.custom__value-container) {
-    margin-top: 4px;
+    margin-top: 2px;
+    margin-bottom: 2px;
     padding: 6px 15px;
   }
 }
 
 .small {
   :global(.custom__value-container) {
-    margin-top: 2px;
+    margin-top: 1px;
+    margin-bottom: 1px;
     padding: 2px 7px 2px 13px;
   }
 

src/routes/WorkPeriods/components/PaymentErrorDetails/styles.module.scss

@@ -2,7 +2,6 @@
 
 .container {
   display: block;
-  max-width: 480px;
   text-align: left;
 }
 

src/routes/WorkPeriods/components/PeriodDetails/index.jsx

@@ -104,12 +104,12 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
                 </div>
               </div>
             </div>
-            <div className={styles.billingAccountSection}>
+            <div className={styles.billingAccountsSection}>
               <div className={styles.sectionLabel}>Billing Account</div>
               <SelectField
-                className={
-                  billingAccountsError ? styles.billingAccountsError : ""
-                }
+                className={cn(styles.billingAccountsSelect, {
+                  [styles.billingAccountsError]: billingAccountsError,
+                })}
                 id={`rb_bil_acc_${periodId}`}
                 isDisabled={billingAccountsIsDisabled}
                 size="small"

src/routes/WorkPeriods/components/PeriodDetails/styles.module.scss

@@ -69,10 +69,14 @@
   color: #e90c5a;
 }
 
-.billingAccountSection {
+.billingAccountsSection {
   margin-top: 13px;
 }
 
+.billingAccountsSelect {
+  min-width: 368px;
+}
+
 .billingAccountsError {
   color: #e90c5a;
 }

src/routes/WorkPeriods/components/PeriodItem/styles.module.scss

@@ -1,10 +1,10 @@
 @import "styles/mixins";
 @import "styles/variables";
 
-tr.container {
+.container {
   > td {
-    padding-left: 17px;
-    padding-right: 17px;
+    padding-left: 15px;
+    padding-right: 18px;
     background: #fff;
   }
 
@@ -41,7 +41,7 @@ tr.container {
 }
 
 td.toggle {
-  padding: 12px 20px 12px 15px;
+  padding: 12px 18px 12px 15px;
   line-height: 15px;
 }
 

src/routes/WorkPeriods/components/PeriodList/index.jsx

@@ -32,7 +32,13 @@ const PeriodList = ({ className }) => {
 
   return (
     <ProjectNameContextProvider>
-      <div className={cn(styles.container, className)}>
+      <div
+        className={cn(
+          styles.container,
+          { [styles.hasItems]: periods.length },
+          className
+        )}
+      >
         <table className={styles.table}>
           <thead>
             <PeriodListHead />

src/routes/WorkPeriods/components/PeriodList/styles.module.scss

@@ -3,6 +3,13 @@
 .container {
   position: relative;
   padding: 0 20px 0 15px;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+
+  &.hasItems {
+    min-height: 348px;
+  }
 }
 
 .table {

src/routes/WorkPeriods/index.jsx

@@ -20,28 +20,25 @@ import styles from "./styles.module.scss";
  * @returns {JSX.Element}
  */
 const WorkPeriods = () => (
-  <Page className={styles.container}>
+  <Page>
     <Sidebar>
       <PeriodFilters />
     </Sidebar>
     <Content>
       <PeriodsContentHeader />
-      <ContentBlock className={styles.periodsBlock}>
+      <ContentBlock>
         <div className={styles.periodsHeader}>
           <PeriodCount className={styles.periodCount} />
           <PeriodWeekPicker className={styles.periodWeekPicker} />
           <PeriodsPagination
-            className={styles.periodsPagination}
+            className={styles.periodsPaginationTop}
             id="periods-pagination-top"
           />
         </div>
         <PeriodsSelectionMessage />
         <Periods />
         <div className={styles.periodsFooter}>
-          <PeriodsPagination
-            className={styles.periodPagination}
-            id="periods-pagination-bottom"
-          />
+          <PeriodsPagination id="periods-pagination-bottom" />
         </div>
       </ContentBlock>
     </Content>

src/routes/WorkPeriods/styles.module.scss

@@ -1,31 +1,57 @@
-.container {
-}
-
-.periodsBlock {
-}
+@import "styles/mixins";
 
 .periodsHeader {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   padding: 13px 13px 13px 32px;
-}
 
-.periodsFooter {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 13px 13px 13px 32px;
+  @include desktop {
+    flex-wrap: nowrap;
+  }
 }
 
 .periodCount {
+  margin-right: 20px;
+  margin-bottom: 13px;
   white-space: nowrap;
+
+  @include tablet {
+    margin-bottom: 0;
+  }
+
+  @include desktop {
+    margin-right: 40px;
+  }
 }
 
 .periodWeekPicker {
-  margin-left: 40px;
+  margin-bottom: 13px;
+
+  @include tablet {
+    margin-bottom: 0;
+  }
+}
+
+.periodsPaginationTop {
+  width: 100%;
+
+  @include tablet {
+    margin-left: 20px;
+    width: auto;
+    min-width: 382px;
+  }
+
+  @include desktop {
+    margin-left: 40px;
+    min-width: 505px;
+  }
 }
 
-.periodsPagination {
-  margin-left: 40px;
+.periodsFooter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 13px 13px 13px 32px;
 }