fix(web): feedback by plinio implementation

Author: kemuru

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -1,34 +1,19 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { StandardPagination } from "@kleros/ui-components-library";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useFiltersContext } from "context/FilterProvider";
 import { CasesPageQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
 import CasesListHeader from "./CasesListHeader";
-import { useLocation } from "react-router-dom";
 
-const GridContainer = styled.div<{ path: string }>`
+const GridContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: 8px;
-  ${({ path }) =>
-    landscapeStyle(() =>
-      path === "/dashboard"
-        ? css`
-            display: flex;
-          `
-        : 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`
   display: flex;
   flex-direction: column;
@@ -52,13 +37,10 @@ export interface ICasesGrid {
 
 const CasesGrid: React.FC<ICasesGrid> = ({ disputes, currentPage, setCurrentPage, numberDisputes, casesPerPage }) => {
   const { isList } = useFiltersContext();
-  const location = useLocation();
-
-  const path = location.pathname;
   return (
     <>
       {!isList ? (
-        <GridContainer path={path}>
+        <GridContainer>
           {disputes.map((dispute) => {
             return <DisputeCard key={dispute?.id} {...dispute} />;
           })}

web/src/components/DisputeCard/index.tsx

@@ -16,15 +16,21 @@ import { isUndefined } from "utils/index";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
 
 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;

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));
     `
   )}
 `;

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;
     `
   )}
 `;

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -15,7 +15,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%);

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -11,7 +11,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%;
@@ -44,7 +43,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 = [

web/src/pages/Home/LatestCases.tsx

@@ -7,18 +7,19 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 
 const Container = styled.div`
   margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  .disputes-container {
-    display: flex;
-    gap: 24px;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
 
   h1 {
     margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   }
 `;
 
+const DisputesContainer = styled.div`
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
 const LatestCases: React.FC = () => {
   const { data } = useCasesQuery(0);
   const { setIsList } = useFiltersContext();
@@ -30,11 +31,11 @@ const LatestCases: React.FC = () => {
   return (
     <Container>
       <h1>Latest Cases</h1>
-      <div className="disputes-container">
+      <DisputesContainer>
         {data
           ? data.disputes.map((dispute) => <DisputeCard key={dispute.id} {...dispute} />)
           : Array.from({ length: 3 }).map((_, index) => <StyledSkeleton key={index} width={312} height={260} />)}
-      </div>
+      </DisputesContainer>
     </Container>
   );
 };

web/src/styles/global-style.ts

@@ -60,6 +60,11 @@ export const GlobalStyle = createGlobalStyle`
     color: ${({ theme }) => theme.primaryText};
   }
 
+  textarea {
+    font-family: "Open Sans";
+    font-size: 14px;
+  }
+
   small {
     font-weight: 600;
     font-size: 14px;