kleros · jaybuidl · Oct 11, 2023 · Oct 4, 2023 · Oct 9, 2023 · Oct 10, 2023
diff --git a/web/src/components/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo } from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { useWindowSize } from "react-use";
 import { useParams } from "react-router-dom";
-import Skeleton from "react-loading-skeleton";
+import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton";
 import { StandardPagination } from "@kleros/ui-components-library";
-import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useIsList } from "context/IsListProvider";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter } from "utils/uri";
@@ -17,17 +17,7 @@ const GridContainer = styled.div`
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: 8px;
-  ${landscapeStyle(
-    () =>
-      css`
-        display: grid;
-        row-gap: 16px;
-        column-gap: 8px;
-        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-        justify-content: space-between;
-      `
-  )}
+  gap: 24px;
 `;
 
 const ListContainer = styled.div`
@@ -37,11 +27,6 @@ const ListContainer = styled.div`
   gap: 8px;
 `;
 
-const StyledSkeleton = styled(Skeleton)`
-  height: 260px;
-  width: 310px;
-`;
-
 // 24px as margin-top since we already have 8px from the flex gap
 const StyledPagination = styled(StandardPagination)`
   margin-top: 24px;
@@ -71,15 +56,15 @@ const CasesGrid: React.FC<ICasesGrid> = ({ disputes, casesPerPage, totalPages, c
         <ListContainer>
           <CasesListHeader />
           {isUndefined(disputes)
-            ? [...Array(casesPerPage)].map((_, i) => <StyledSkeleton key={i} />)
+            ? [...Array(casesPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)
             : disputes.map((dispute) => {
                 return <DisputeCard key={dispute.id} {...dispute} />;
               })}
         </ListContainer>
       ) : (
         <GridContainer>
           {isUndefined(disputes)
-            ? [...Array(casesPerPage)].map((_, i) => <StyledSkeleton key={i} />)
+            ? [...Array(casesPerPage)].map((_, i) => <SkeletonDisputeCard key={i} />)
             : disputes.map((dispute) => {
                 return <DisputeCard key={dispute.id} {...dispute} overrideIsList />;
               })}

diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx
@@ -16,15 +16,21 @@ import PeriodBanner from "./PeriodBanner";
 import { isUndefined } from "utils/index";
 
 const StyledCard = styled(Card)`
-  width: 312px;
+  width: 100%;
   height: 260px;
   ${landscapeStyle(
     () =>
       css`
-        width: 380px;
+        /* 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);
       `
   )}
 `;
+
 const StyledListItem = styled(Card)`
   display: flex;
   flex-grow: 1;

diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Dispute_Filter } from "../graphql/graphql";
 import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
-import { StyledSkeleton } from "components/StyledSkeleton";
+import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
 
 const Container = styled.div`
@@ -30,7 +30,7 @@ const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
       <Title>Latest Cases</Title>
       <DisputeContainer>
         {isUndefined(disputes)
-          ? Array.from({ length: 3 }).map((_, index) => <StyledSkeleton key={index} width={312} height={260} />)
+          ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeCard key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
     </Container>

diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx
@@ -52,7 +52,7 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375));
+  width: 82vw;
   max-width: 600px;
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.stroke};
@@ -66,6 +66,7 @@ const Container = styled.div`
   ${landscapeStyle(
     () => css`
       overflow-y: hidden;
+      width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375));
     `
   )}
 `;

diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx
@@ -1,6 +1,39 @@
-import styled from "styled-components";
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import Skeleton from "react-loading-skeleton";
 
 export const StyledSkeleton = styled(Skeleton)`
   z-index: 0;
 `;
+
+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);
+      `
+  )}
+`;
+
+const StyledSkeletonDisputeCard = styled(Skeleton)`
+  height: 260px;
+`;
+
+const StyledSkeletonDisputeListItem = styled(Skeleton)`
+  height: 62px;
+`;
+
+export const SkeletonDisputeCard = () => (
+  <SkeletonDisputeCardContainer>
+    <StyledSkeletonDisputeCard />
+  </SkeletonDisputeCardContainer>
+);
+
+export const SkeletonDisputeListItem = () => <StyledSkeletonDisputeListItem />;
diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx
@@ -25,15 +25,15 @@ const Header = styled.h1`
 const Container = styled.div`
   display: flex;
   position: absolute;
-  max-height: 80vh;
+  max-height: 340px;
   top: 5%;
   left: 50%;
   transform: translate(-50%);
   z-index: 1;
   flex-direction: column;
   align-items: center;
 
-  width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375));
+  width: 82%;
   max-width: 480px;
   min-width: 300px;
   border-radius: 3px;
@@ -52,6 +52,8 @@ const Container = styled.div`
       left: 0;
       right: auto;
       transform: none;
+      width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375));
+      max-height: 80vh;
     `
   )}
 `;

diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx
@@ -16,7 +16,8 @@ const Container = styled.div`
   position: absolute;
   max-height: 80vh;
   overflow-y: auto;
-  width: auto;
+  width: 82%;
+  max-width: 444px;
   top: 5%;
   left: 50%;
   transform: translateX(-50%);

diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -13,7 +13,6 @@ const Container = styled.div`
   position: absolute;
   max-height: 80vh;
   overflow-y: auto;
-  z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
   flex-direction: column;
   top: 5%;
@@ -46,7 +45,14 @@ const StyledSettingsText = styled.div`
 
 const StyledTabs = styled(Tabs)`
   padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300)));
+  width: 82vw;
+  max-width: 660px;
+
+  ${landscapeStyle(
+    () => css`
+      width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300)));
+    `
+  )}
 `;
 
 const TABS = [

diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/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 Cases: React.FC = () => (

diff --git a/web/src/pages/Courts/index.tsx b/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 = () => {

diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx
@@ -17,6 +17,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)`

diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/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`

diff --git a/web/src/pages/Home/index.tsx b/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 = () => {

diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
@@ -66,6 +66,11 @@ export const GlobalStyle = createGlobalStyle`
     color: ${({ theme }) => theme.primaryText};
   }
 
+  textarea {
+    font-family: "Open Sans";
+    font-size: 14px;
+  }
+
   small {
     font-weight: 600;
     font-size: 14px;