fix: responsiveness in macbook air m1 13dot3 inches, cases grid, extrastats

Author: kemuru

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -17,9 +17,9 @@ import DisputeView from "components/DisputeView";
 import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton";
 
 const GridContainer = styled.div`
-  --gap: 24px;
+  --gap: 16px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(350px, (100% - var(--gap) * 2)/3)), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr));
   align-items: center;
   gap: var(--gap);
 `;

web/src/components/LatestCases.tsx

@@ -21,9 +21,9 @@ const Title = styled.h1`
 `;
 
 const DisputeContainer = styled.div`
-  --gap: 24px;
+  --gap: 16px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(350px, (100% - var(--gap) * 2)/3)), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr));
   align-items: center;
   gap: var(--gap);
 `;

web/src/pages/Home/CourtOverview/ExtraStats.tsx

@@ -13,7 +13,7 @@ import ExtraStatsDisplay from "components/ExtraStatsDisplay";
 const StyledCard = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 0 32px;
+  gap: 0 24px;
   justify-content: center;
 `;