Merge pull request #144 from awest25/viewport_fix_pointlists

Fixed viewport issue for pointlist(gap that was forming when resized

app/(interactive)/matches/[slug]/page.js

@@ -269,6 +269,7 @@ const MatchPage = () => {
 
         .pointsList {
           flex: 1; /* Takes up 1/3 of the space */
+          max-width: 0.5 vw;
           margin-top: 0;
           padding: 1vw;
           margin-left: 1vw;
@@ -291,7 +292,7 @@ const MatchPage = () => {
           background: linear-gradient(to bottom, #ffffff, #fafafa); 
         }
         .jumpList {
-          width: 325px;
+          width: 25vw;
         }
         
         .listHolder {

app/styles/FilterList.module.css

@@ -3,121 +3,108 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    width: 100%;
+    width: 50vw;
     box-sizing: border-box;
-    padding: 10px;
-    margin: 10px 0;
+    padding: 1vw;
+    margin: 1vw 0;
+
     background-color: #ffffff;
-    border: 1px solid #eaeaea;
-    border-radius: 10px;
+    border: 0.2vw solid #eaeaea;
+;
+    border-radius: 1.5vw;
+    font-size: 1.5vw;
+
 }
 
 .activeFilterList {
     padding: 0;
+
     list-style-type: none;
     margin: 0;
+    border-radius: 0.3vw;
     overflow-y: scroll;
-    max-height: 65px; 
+    max-height: 13vw; 
     display: flex;
     flex-wrap: wrap;
 }
 
 .activeFilterItem {
     background-color: #f7f7f7; /* Slightly lighter to distinguish from hover state */
     color: #333;
-    border: 1px solid #ccc; /* Subtle border color */
-    border-radius: 8px;
-    padding: 8px 16px;
-    margin: 8px;
+    border: 0.2vw solid #ccc; /* Subtle border color */
+    border-radius: 0.0.5vw;
+    padding: 0.4vw 0.8vw;
+    margin: 0.5vw;
     cursor: pointer;
+    font-size: 1.5vw;
     transition: all 0.2s ease-in-out; /* Smooth transition for all properties */
 }
 
 .activeFilterItem:hover {
     background-color: #e2e2e2; /* Darker on hover for better feedback */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly more pronounced shadow */
+    box-shadow: 0 1.6vw 3.2vw rgba(0, 0, 0, 0.1); /* Slightly more pronounced shadow */
 }
 
-/* Style for an active or selected filter item */
 .activeFilterItem.active {
     background-color: #d1eaff; /* A light blue to indicate active status */
     color: #0056b3; /* A darker blue to match */
     border-color: #0056b3; /* Same dark blue for the border */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Consistent with hover state */
+    box-shadow: 0 0.8vw 1.6vw rgba(0, 0, 0, 0.1); /* Consistent with hover state */
 }
 
 .availableFilterItem {
-    padding: 8px 10px; /* Adjusted padding for consistency */
-    margin: 4px 0; /* Adjusted margin for better layout */
+    padding: 0.8vw 1vw; /* Adjusted padding for consistency */
+    margin: 0.4vw 0; /* Adjusted margin for better layout */
     background-color: #f9f9f9; /* Slightly different background to distinguish from active items */
-    border-radius: 8px; /* Consistent rounded corners */
-    border: 1px solid #eaeaea; /* Subtle border */
+    border-radius: 0.8vw; /* Consistent rounded corners */
+    border: 0.2vw solid #eaeaea; /* Subtle border */
     list-style-type: none;
     cursor: pointer;
+    font-size: 1.5vw;
     transition: background-color 0.2s ease-in-out;
 }
 
 .availableFilterItem:hover {
     background-color: #f0f0f0; /* A touch darker to indicate hover state */
 }
 
-.availableFilterSubitem {
-    list-style-type: none;
-    padding-left: 20px; /* Indent subitems for hierarchy */
-}
-
-.availableFilterList {
-    padding: 0;
-    list-style-type: none;
-    margin: 8px 0; /* Consistent with other margins */
-}
-
-.availableFilterSubitemList {
-    padding-left: 20px; /* Indent subitems for hierarchy */
-    list-style-type: none;
-}
-
 .filterValuesList {
     padding: 0;
     list-style-type: none;
+    font-size: 1.5vw;
 }
 
 .filterValueItem {
     background-color: #f8f8f8; /* Light grey background for each item */
     color: #333; /* Dark grey text color for contrast */
-    padding: 6px 12px; /* Padding inside each item */
-    margin: 2px 0; /* Margin between items */
-    border-radius: 4px; /* Rounded corners for the items */
+    padding: 0.6vw 1.2vw; /* Padding inside each item */
+    margin: 0.2vw 0; /* Margin between items */
+    border-radius: 0.4vw; /* Rounded corners for the items */
     cursor: pointer; /* Cursor changes to pointer to indicate clickability */
     transition: background-color 0.2s ease-in-out; /* Smooth transition for hover effect */
     display: flex;
+    font-size: 1.5vw;
     justify-content: space-between;
 }
 
 .filterValueItem:hover {
     background-color: #e0e0e0; /* Slightly darker grey background on hover */
-    /* Optional: Add a shadow or change the font weight to indicate hover state */
-    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
-    /* font-weight: 500; */
 }
 
-/* If you have an active state to indicate a selected filter value */
 .filterValueItem.active {
     background-color: #d0e0f0; /* Different background color for active state */
     color: #104070; /* Darker color for the text */
     font-weight: bold; /* Make the active item text bold */
-    /* Optionally, add a left border to highlight the active state */
-    border-left: 4px solid #007bff; /* Blue border for active item */
-    padding-left: 8px; /* Adjust padding to accommodate the border */
+    border-left: 0.4vw solid #007bff; /* Blue border for active item */
+    padding-left: 0.8vw; /* Adjust padding to accommodate the border */
 }
 
 .optionsList {
-    /* font-size: small; */
     padding: 0;
     list-style-type: none;
     margin: 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-
-}
+    font-size: 1.5vw;
+}

app/styles/Scoreboard.module.css

@@ -2,44 +2,47 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  padding: 8px;
-  margin-top: 8px;
+  border: 0.1vw solid #eaeaea;
+  border-radius: 1.5vw;
+  padding: 1vw;
+  margin-top: 1vw;
   background-color: transparent;
   font-weight: bold;
 }
 
 .scoreboard th,
-.scoreboard td{
+.scoreboard td {
   text-align: left;
-  /* margin: 10px; */
-  padding-top: 6px; /* Add padding for spacing within cells */
-  padding-bottom: 6px;
-  padding-left: 2px;
-  padding-right: 2px;
+  padding-top: 0.75vw; /* Add padding for spacing within cells */
+  padding-bottom: 0.75vw;
+  padding-left: 0.2vw;
+  padding-right: 0.2vw;
+  font-size: 1.5vw;
 }
 
-.scoreboard th{
+.scoreboard th {
   font-weight: normal;
+  font-sze: 1.5vw;
 }
 
 .table {
   border-collapse: collapse;
+
 }
 
 .pointScore {
   font-weight: bold;
   color: #8BB8E8;
+  font-size: 1.5vw;
 }
 
 .live {
-  font-size: small;
+  font-size: 1.5vw;
   font-weight: normal;
 }
 
 .bullet {
   color: #8BB8E8;
-  font-weight:bolder;
-  /* font-size: large; */
-}
+  font-weight: bolder;
+  font-size: 1.5vw;
+}