Merge pull request #6678 from Rajesh-Nagarajan-11/fix/newcomers-table-horizontal-scroll

[Community] Fix table overflow on Newcomers page by adding horizontal scroll

Author: vr-varad

src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js

@@ -122,14 +122,17 @@ export const NewcomersGuideWrapper = styled.section`
     .community-collage {
       text-align: center ;
       min-width: 45vmin;
-      
+      margin-bottom: 1rem;
     }
     .community-img{
       text-align:center;
     }
     .table-wrapper{
       text-align: center;
       margin-bottom: 4rem;
+      h5 {
+        margin-bottom: 2.5rem;
+      }
     }
     .book-container {
     display: flex;
@@ -152,13 +155,14 @@ export const NewcomersGuideWrapper = styled.section`
   }
 
   .book {
-    min-width: 200px;
-    min-height: 300px;
+    width: 200px;
+    height: 300px;
     position: relative;
     transform-style: preserve-3d;
     transform: rotateY(-30deg);
     transition: 1s ease;
     animation: 1s ease 0s 1 initAnimation;
+    overflow: visible;
   }
 
   .book:hover {
@@ -170,10 +174,18 @@ export const NewcomersGuideWrapper = styled.section`
     top: 0;
     left: 0;
     background-color: #171a12;
-    width: 200px;
-    height: 300px;
+    width: 100%;
+    height: 100%;
     transform: translateZ(25px);
     border-radius: 0 2px 2px 0;
+    overflow: visible;
+  }
+  
+  .book > :first-child img {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
   }
 
   .book::before {
@@ -182,7 +194,7 @@ export const NewcomersGuideWrapper = styled.section`
     left: 0;
     top: 3px;
     width: 48px;
-    height: 294px;
+    height: calc(100% - 6px);
     transform: translateX(172px) rotateY(90deg);
     background: linear-gradient(
       90deg,
@@ -215,8 +227,8 @@ export const NewcomersGuideWrapper = styled.section`
     top: 0;
     left: 0;
     content: " ";
-    width: 200px;
-    height: 300px;
+    width: 100%;
+    height: 100%;
     transform: translateZ(-25px);
     background-color: #292929;
     border-radius: 0 2px 2px 0;
@@ -244,7 +256,19 @@ export const NewcomersGuideWrapper = styled.section`
         h2 {
           margin-top: -1.5rem;
         }
+      }  
+      /* For "Explore the Meshery Community" section */
+      .community-collage {
+        order: 2;
+      }
+      /* For "Finding an Issue" section - apply to Col */
+      .col-finding-an-issue {
+        order: 2;
+      }
+      .col-newcomers-form {
+        margin-bottom: 1.5rem;
       }
+  }  
   }
 `;
 

src/sections/Community/Newcomers-guide/Tutorials-table/TutorialsTable.style.js

@@ -1,47 +1,78 @@
 import styled from "styled-components";
 
 export const TutorialsTableWrapper = styled.div`
-  box-shadow:0 2px 16px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   
-  table{
-    display: table;
+  table {
     width: 100%;
-    height: auto;
+    min-width: 600px;
     border-collapse: collapse;
-    margin: 3.75rem auto;
+    margin: 0 auto 2rem auto;
+    
+    @media (max-width: 375px) {
+      margin: 0.5rem auto;
+    }
+    
     th {
       color: white;
+      background-color: ${props => props.theme.secondaryColor};
     }
+    
     th, tr {
-      height: 3.75rem;
+      height: 3rem;
       vertical-align: middle;
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      
+      @media (max-width: 375px) {
+        height: 2.5rem;
+      }
     }
+    
     tr:nth-child(odd) {
       background-color: ${props => props.theme.grey212121ToWhite};
     }
-    th {
-      background-color: ${props => props.theme.secondaryColor};
-    }
+    
     th, td {
       border-bottom: 1px solid #F0F0F0;
       padding: 0 0.625rem;
-      p{
-        margin: 0.5rem 0;
+      
+      @media (max-width: 375px) {
+        padding: 0 0.375rem;
       }
+      
+      p {
+        margin: 0.25rem 0;
+      }
+      
       span {
         display: block;
       }
     }
-    }
-    .newBadge {
+  }
+  
+  .newBadge {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
+    
     img {
       height: 26px;
       width: auto;
+      
+      @media (max-width: 375px) {
+        height: 20px;
+      }
     }
   }
+  
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: ${props => props.theme.secondaryColor};
+    border-radius: 4px;
+  }
 `;

src/sections/Community/Newcomers-guide/index.js

@@ -82,10 +82,10 @@ const NewcomersGuide = () => {
               <h3>Fill in the Community Member Form</h3>
               <p>Help us get to know you, so that we can highlight projects and initiatives that align with your interests. Fill-in a community member form. Gain access to community resources.</p>
             </Col>
-            <Col $sm={12} $lg={6}>
+            <Col $sm={12} $lg={6} className="col-newcomers-form">
               <Button $primary className="newcomers-form" title="Submit a Member Form" $url="/newcomer" $external={false} />
             </Col>
-            <Col $sm={12} $lg={6}>
+            <Col $sm={12} $lg={6} className="col-finding-an-issue">
               <div className="finding-an-issue">
                 <StaticImage src={CommunityImage2} alt="Five Working Image" />
               </div>