fix(web): dispute card skeletons width & height correction, padding bottoms adjustments

Author: kemuru

web/src/components/StyledSkeleton.tsx

@@ -9,21 +9,22 @@ export const StyledSkeleton = styled(Skeleton)`
 
 const SkeletonDisputeCardContainer = styled.div`
   width: 100%;
+
   ${landscapeStyle(
     () =>
       css`
         /* Explanation of this formula:
-        - The 48px accounts for the total width of gaps: 2 gaps * 24px each.
-        - The 0.333 is used to equally distribute width among 3 cards per row.
-        - The 294px ensures the card has a minimum width.
-      */
-        width: max(calc((100% - 48px) * 0.333), 294px);
+      - The 48px accounts for the total width of gaps: 2 gaps * 24px each.
+      - The 0.333 is used to equally distribute width among 3 cards per row.
+      - The 348px ensures the card has a minimum width.
+    */
+        width: max(calc((100% - 48px) * 0.333), 348px);
       `
   )}
 `;
 
 const StyledSkeletonDisputeCard = styled(Skeleton)`
-  height: 260px;
+  height: calc(272px + (296 - 270) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
 
 const StyledSkeletonDisputeListItem = styled(Skeleton)`

web/src/pages/Cases/index.tsx

@@ -9,7 +9,7 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.lightBackground};
   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);
+  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;

web/src/pages/Courts/index.tsx

@@ -9,7 +9,7 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.lightBackground};
   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);
+  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;

web/src/pages/Dashboard/index.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.lightBackground};
   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);
+  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;

web/src/pages/Home/index.tsx

@@ -12,7 +12,7 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.lightBackground};
   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);
+  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;