From 7ef5d8aa619a5b0da5360f63e6a171150157a684 Mon Sep 17 00:00:00 2001
From: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Date: Fri, 30 Dec 2022 21:52:24 -0500
Subject: [PATCH] Fixed graph overflows (#123)

Closes #110

Fixed the header not being sticky. The reason was due to the overflow-x hidden on the body. Removed that, and instead solved the root cause of the horizontal overflow, which was some graphs overflowing.

This required changing some of the compontent wrapper styles, which I think are overall improved now (slightly less hacks). But please check to make sure that the alignment of graphs and text isnt destroyed on various screen sizes. I checked and it seemed fine.

Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/123
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 components/ComponentWrapper.module.css | 12 +++++++++---
 components/ComponentWrapper.tsx        |  2 +-
 components/GroupedBarGraph.module.css  |  1 -
 components/LineGraph.module.css        |  1 -
 pages/_app.css                         |  5 -----
 pages/coop.tsx                         |  6 +++---
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/ComponentWrapper.module.css b/components/ComponentWrapper.module.css
index d10c7c4..70da553 100644
--- a/components/ComponentWrapper.module.css
+++ b/components/ComponentWrapper.module.css
@@ -10,7 +10,6 @@
   composes: sideWrapperCommon;
   align-self: end;
   margin-right: 0;
-  padding-right: 0;
   border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
   flex-direction: row-reverse;
   padding-right: calc(50rem / 16);
@@ -20,7 +19,6 @@
   composes: sideWrapperCommon;
   align-self: start;
   margin-left: 0;
-  padding-left: 0;
   border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
   flex-direction: row;
   padding-left: calc(50rem / 16);
@@ -42,7 +40,6 @@
    */
   margin: 0 0 calc(45rem / 16) 0;
   align-self: center;
-  padding: 0 15%;
 }
 
 .wrapperCenter .internalWrapper {
@@ -82,10 +79,19 @@
 
 .internalWrapper {
   padding: calc(20rem / 16);
+  /* Without this, some graphs will have an horizontal scroll bar thats not needed */
+  overflow-x: auto;
 }
 
 .internalWrapper p {
   font-size: calc(24rem / 16);
   opacity: .85;
   line-height: 1.25;
+}
+
+.textWrapper {
+  /* We add this since we want the text to shrink before the graph ever shrinks */
+  flex-shrink: 1000;
+  /* So that text is still readable in the awkward 1000px width screen size */
+  min-width: 200px;
 }
\ No newline at end of file
diff --git a/components/ComponentWrapper.tsx b/components/ComponentWrapper.tsx
index 1d98bee..dcb5a4b 100644
--- a/components/ComponentWrapper.tsx
+++ b/components/ComponentWrapper.tsx
@@ -33,7 +33,7 @@ export function ComponentWrapper({
       ${bodyText ? "" : styles.wrapperNoBodyText}
       `}
     >
-      <div className={styles.internalWrapper}>
+      <div className={`${styles.internalWrapper} ${styles.textWrapper}`}>
         <h3>{heading}</h3>
         {bodyText ? <p>{bodyText}</p> : null}
       </div>
diff --git a/components/GroupedBarGraph.module.css b/components/GroupedBarGraph.module.css
index bbf8628..e8b1611 100644
--- a/components/GroupedBarGraph.module.css
+++ b/components/GroupedBarGraph.module.css
@@ -1,7 +1,6 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .barBackground {
diff --git a/components/LineGraph.module.css b/components/LineGraph.module.css
index fb9cd27..a7071cc 100644
--- a/components/LineGraph.module.css
+++ b/components/LineGraph.module.css
@@ -11,7 +11,6 @@
 
 .wrapper {
   display: flex;
-  align-items: center;
   width: min-content;
 }
 
diff --git a/pages/_app.css b/pages/_app.css
index 281d09a..b287870 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -2,11 +2,6 @@ html {
   scroll-behavior: smooth;
 }
 
-html,
-body {
-  overflow-x: hidden;
-}
-
 body {
   /* Theme colours */
   --pink: #EF839D;
diff --git a/pages/coop.tsx b/pages/coop.tsx
index c69c57a..ce925eb 100644
--- a/pages/coop.tsx
+++ b/pages/coop.tsx
@@ -213,7 +213,7 @@ export default function CoopPage() {
         heading="What was your coop evaluation rating?"
         bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!"
       >
-        <div style={{ paddingRight: "150px" }}>
+        <div>
           <StackedBarGraphHorizontal
             width={isMobile ? pageWidth / 1.5 : 600}
             height={DefaultProp.graphHeight}
@@ -240,7 +240,7 @@ export default function CoopPage() {
         align="right"
         noBackground
       >
-        <div style={{ paddingRight: "150px" }}>
+        <div>
           <StackedBarGraphVertical
             width={isMobile ? pageWidth / 1.5 : 600}
             height={DefaultProp.graphHeight}
@@ -289,7 +289,7 @@ export default function CoopPage() {
         bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
         noBackground
       >
-        <div style={{ paddingRight: "150px" }}>
+        <div>
           <StackedBarGraphVertical
             width={isMobile ? pageWidth / 1.5 : 600}
             height={DefaultProp.graphHeight}