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

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

@@ -122,6 +122,7 @@ export const NewcomersGuideWrapper = styled.section`
     .community-collage {
       text-align: center ;
       min-width: 45vmin;
+      overflow: hidden; /* Prevent book from overflowing */
 
     }
     .community-img{
@@ -136,6 +137,12 @@ export const NewcomersGuideWrapper = styled.section`
     align-items: center;
     justify-content: center;
     perspective: 600px;
+    max-width: 100%; /* Ensure it doesn't exceed container width */
+    margin: 0 auto; /* Center the book */
+
+    @media (max-width: 992px) {
+      margin-bottom: 2rem; /* Add space between book and text on mobile */
+    }
   }
 
   @keyframes initAnimation {
@@ -159,6 +166,8 @@ export const NewcomersGuideWrapper = styled.section`
     transform: rotateY(-30deg);
     transition: 1s ease;
     animation: 1s ease 0s 1 initAnimation;
+    margin: 0 auto; /* Center the book */
+    max-width: 200px; /* Ensure it doesn't exceed expected width */
   }
 
   .book:hover {

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

@@ -2,13 +2,26 @@ import styled from "styled-components";
 
 export const TutorialsTableWrapper = styled.div`
   box-shadow:0 2px 16px rgba(0,0,0,0.2);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  @media (max-width: 768px) {
+    margin: 0 -1rem;
+    border-radius: 0;
+  }
 
   table{
     display: table;
     width: 100%;
+    min-width: 600px;
     height: auto;
     border-collapse: collapse;
     margin: 3.75rem auto;
+
+    @media (max-width: 768px) {
+      margin: 1rem auto;
+      min-width: 700px;
+    }
     th {
       color: white;
     }
@@ -26,8 +39,23 @@ export const TutorialsTableWrapper = styled.div`
     th, td {
       border-bottom: 1px solid #F0F0F0;
       padding: 0 0.625rem;
+      white-space: nowrap;
+
+      @media (max-width: 768px) {
+        padding: 0 0.5rem;
+        font-size: 0.9rem;
+      }
+
+      @media (max-width: 480px) {
+        padding: 0 0.375rem;
+        font-size: 0.85rem;
+      }
+
       p{
         margin: 0.5rem 0;
+        @media (max-width: 768px) {
+          margin: 0.25rem 0;
+        }
       }
       span {
         display: block;
@@ -42,6 +70,33 @@ export const TutorialsTableWrapper = styled.div`
     img {
       height: 26px;
       width: auto;
+
+      @media (max-width: 768px) {
+        height: 22px;
+      }
+
+      @media (max-width: 480px) {
+        height: 20px;
+      }
     }
   }
+
+  /* Scrollbar styling for better UX */
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${props => props.theme.secondaryColor};
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${props => props.theme.primaryColor};
+  }
 `;