update styles so it works when shrunk and hides scroll bars

peerprep/frontend/src/styles/App.css

@@ -22,7 +22,6 @@ h2 {
   color: black;
 }
 
-
 /* Container uses flexbox for split layout */
 .container {
   display: flex;
@@ -503,10 +502,17 @@ h2 {
   height: 85vh; /* Full height of the viewport */
   width: 80vw; /* Full width of the viewport */
 
-  overflow-y: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
   background-color: white;
   padding: 20px;
   box-sizing: border-box; /* Include padding in width and height calculations */
+  scrollbar-width: none;
+}
+
+/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+.editor-container-parent::-webkit-scrollbar {
+  display: none;
 }
 
 .CodeMirror {
@@ -544,6 +550,16 @@ h2 {
   vertical-align: top; /* Ensures text starts from the top */
 }
 
+/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+.editor-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for Firefox */
+.editor-container {
+  scrollbar-width: none; /* Firefox */
+}
+
 .chat-box {
   width: 30%;
   display: flex;
@@ -628,7 +644,7 @@ input {
 .editor-header {
   text-align: center;
   margin-bottom: -10px;
-  margin-top: -60px;
+  margin-top: -45px;
 }
 
 .leave-btn,
@@ -697,12 +713,13 @@ input {
   display: flex;
   flex-direction: row; /* Arrange items in a vertical stack */
   align-items: center; /* Align items to the left */
-  gap: 100px; /* Add vertical spacing between items */
+  gap: 60px; /* Add vertical spacing between items */
 }
 
 .matching-form2 {
   padding: 0px;
   max-width: 40%;
+  min-width: 18%;
   margin: 0 auto; /* Center the form */
   border-radius: 10px; /* Rounded corners for the form */
   background-color: white; 
@@ -778,20 +795,35 @@ input {
 
 .output-container{
   overflow-y: scroll;
+  min-height: 50px;
+  max-height: 100px;
+  max-width: 900px;
+}
+
+/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+.output-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for Firefox */
+.output-container {
+  scrollbar-width: none; /* Firefox */
 }
 
 .testcases-table {
-  margin: 20px 0;
-  width: 100%;
+  margin: 20px auto; /* Center the table horizontally */
+  max-width: 900px; /* Set max width */
+  width: 100%; /* Allow the table to expand to max-width */
 }
 
 .testcases-table table {
-  width: 100%;
   border-collapse: collapse;
   border: 2px solid #333 !important; /* Outer border around the table */
   text-align: center;
+  width: 100%; /* Ensure the table fills the container width */
 }
 
+
 .testcases-table th, .testcases-table td {
   border: 1px solid #333 !important; /* Border around each cell */
   padding: 8px;