feat(web): max-width for layout elements and stats grid width adjustment

Author: kemuru

web/src/pages/Cases/index.tsx

@@ -14,6 +14,8 @@ const Container = styled.div`
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: calc(64px + (96 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: 1780px;
+  margin: 0 auto;
 `;
 
 const Cases: React.FC = () => {

web/src/pages/Courts/index.tsx

@@ -10,6 +10,8 @@ const Container = styled.div`
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: calc(64px + (96 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: 1780px;
+  margin: 0 auto;
 `;
 
 const Courts: React.FC = () => {

web/src/pages/Dashboard/index.tsx

@@ -16,6 +16,8 @@ const Container = styled.div`
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: calc(64px + (96 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: 1780px;
+  margin: 0 auto;
 `;
 
 const StyledCasesDisplay = styled(CasesDisplay)`

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

@@ -24,7 +24,7 @@ const StyledCard = styled(Card)`
   padding-left: calc(16px + (35 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: 16px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
 
   ${landscapeStyle(
     () => css`

web/src/pages/Home/index.tsx

@@ -13,6 +13,8 @@ const Container = styled.div`
   padding: calc(32px + (132 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (72 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: calc(64px + (96 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: 1780px;
+  margin: 0 auto;
 `;
 
 const Home: React.FC = () => {