fix: fix overflow issues but content is cut off

ucsddesignco · Jun 1, 2024 · 2d9c2f7 · 2d9c2f7
1 parent eee8dfe
commit 2d9c2f7
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 53 deletions.
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -36,6 +36,7 @@
       padding-inline: $main-padding-mobile-inline;
 
       @media (min-width: $mobile-breakpoint) {
+        overflow-y: hidden;
         padding-block: $main-padding-desktop-block;
         padding-inline: $main-padding-desktop-inline;
         height: 100vh;

diff --git a/src/app/components/Footer/Footer.scss b/src/app/components/Footer/Footer.scss
@@ -7,12 +7,7 @@ footer {
   bottom: 0;
   left: 0;
   width: 100%;
-  padding-inline: $main-padding-mobile-inline;
-  padding-block: 1rem;
-
-  @media (min-width: $tablet-breakpoint) {
-    padding-inline: $main-padding-desktop-inline;
-  }
+  padding-top: 1rem;
 
   span {
     display: flex;

diff --git a/src/app/components/Testimonial/Testimonial.scss b/src/app/components/Testimonial/Testimonial.scss
@@ -1,21 +1,9 @@
 .testimonials {
   margin-top: 1rem;
   width: 100%;
-  overflow: hidden;
-
-  [class^='number-slide'],
-  [class*=' number-slide'] {
-    background: grey;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    font-size: 50px;
-    color: #fff;
-    font-weight: 500;
-    height: 300px;
-    max-height: 100vh;
-  }
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
 
   h3 {
     @media (max-width: $tablet-breakpoint) {
@@ -31,48 +19,61 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 33.33%;
+    width: 33%;
     height: 100%;
-    background-color: yellow;
+    background-color: $secondary-yellow;
     z-index: 1;
   }
 
   .slider-wrapper {
     position: relative;
     width: 100%;
-    border: 1px solid gray;
+    border: 1px solid #bababa;
+    overflow-y: hidden;
+    height: 100%;
+    overflow-y: hidden;
 
     ul {
       padding-left: 0;
       list-style-type: none;
       position: relative;
       z-index: 2;
 
-      &::before {
+      height: 100%;
+      max-height: 100%;
+      min-height: 100%;
+
+      &::before,
+      &::after {
         content: '';
         display: block;
-        width: 50px;
+        width: 100px;
         height: 100%;
         background-color: white;
-        background: linear-gradient(to right, white, transparent);
         position: absolute;
-        left: 0;
         z-index: 3;
       }
 
+      &::before {
+        left: 0;
+        background: linear-gradient(to right, white, transparent);
+      }
+
       &::after {
-        content: '';
-        display: block;
-        width: 50px;
-        height: 100%;
-        background-color: white;
-        background: linear-gradient(to left, white, transparent);
-        position: absolute;
         right: 0;
-        z-index: 3;
+        background: linear-gradient(to left, white, transparent);
       }
 
       li {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        min-height: 100%;
+        // overflow-y: scroll !important;
+        max-height: 100%;
+
         .reviewer {
           text-align: right;
         }

diff --git a/src/app/components/Testimonial/Testimonial.tsx b/src/app/components/Testimonial/Testimonial.tsx
@@ -16,8 +16,8 @@ export default function Testimonial() {
       setLoaded(true);
     },
     slides: {
-      perView: 3,
-      spacing: 33.333
+      // perView: 'auto'
+      perView: 3
     }
   });
 

diff --git a/src/app/pages/Apply/Apply.scss b/src/app/pages/Apply/Apply.scss
@@ -1,7 +1,9 @@
 #apply {
   position: relative;
   width: 100%;
-  overflow-x: hidden;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
 
   h2 {
     margin-bottom: 0.75rem;
@@ -40,6 +42,14 @@
     }
   }
 
+  .bottom-section {
+    height: 100%;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
   @media (max-width: $tablet-breakpoint) {
     button {
       display: none;

diff --git a/src/app/pages/Apply/Apply.tsx b/src/app/pages/Apply/Apply.tsx
@@ -9,20 +9,24 @@ import Testimonial from '@/components/Testimonial/Testimonial';
 export default function Apply() {
   return (
     <section id="apply">
-      <p className="breadcrumb">.05 / Apply</p>
-      <h2>Why Apply?</h2>
-      <hr className="line"></hr>
-      <ul className="grid">
-        {applyInfo.map(item => (
-          <li key={item.id}>
-            <h3>{item.header}</h3>
-            <p>{item.content}</p>
-          </li>
-        ))}
-      </ul>
-      <hr className="line"></hr>
-      <Testimonial />
-      <Footer />
+      <div className="top-section">
+        <p className="breadcrumb">.05 / Apply</p>
+        <h2>Why Apply?</h2>
+        <hr className="line"></hr>
+        <ul className="grid">
+          {applyInfo.map(item => (
+            <li key={item.id}>
+              <h3>{item.header}</h3>
+              <p>{item.content}</p>
+            </li>
+          ))}
+        </ul>
+        <hr className="line"></hr>
+      </div>
+      <div className="bottom-section">
+        <Testimonial />
+        <Footer />
+      </div>
     </section>
   );
 }