Merge pull request #1406 from kleros/fix(web)/fix-cases-list-view-alignment

fix(web): fix-cases-list-view-alignment

Author: alcercu

web/src/components/CasesDisplay/CasesListHeader.tsx

@@ -6,25 +6,23 @@ import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`
   display: flex;
-  justify-content: space-between;
-  gap: calc(15vw + (40 - 15) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   width: 100%;
   height: 100%;
+  justify-content: space-between;
 `;
 
 const CasesData = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  width: 100%;
-  margin-left: ${responsiveSize(0, 33)};
-  flex-wrap: wrap;
-  padding: 0 3%;
-  gap: ${responsiveSize(24, 48, 300)};
+  display: grid;
+  flex: 1;
+  grid-template-columns: repeat(4, ${responsiveSize(100, 130, 900)});
+  column-gap: ${responsiveSize(2, 12, 900)};
+  justify-content: space-between;
+  margin-right: 8px;
 `;
 
 const CaseTitle = styled.div`
   display: none;
+  width: ${responsiveSize(270, 345, 900)};
   margin-left: 32px;
   gap: 36px;
   label {
@@ -42,9 +40,7 @@ const CaseTitle = styled.div`
   )}
 `;
 
-const StyledLabel = styled.label`
-  margin-left: ${responsiveSize(4, 8, 300, 900)};
-`;
+const StyledLabel = styled.label``;
 
 const tooltipMsg =
   "Users have an economic interest in serving as jurors in Kleros: " +

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -27,6 +27,7 @@ const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
         () => css`
           gap: 0;
           height: 100%;
+          flex: 1;
         `
       )}
     `};
@@ -56,9 +57,11 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolea
     css`
       ${landscapeStyle(
         () => css`
-          flex-direction: row;
-          gap: ${responsiveSize(4, 24, 300, 900)};
-          justify-content: space-around;
+          display: grid;
+          grid-template-columns: repeat(4, ${responsiveSize(100, 130, 900)});
+          column-gap: ${responsiveSize(2, 12, 900)};
+          justify-content: space-between;
+          align-items: center;
         `
       )}
     `};

web/src/components/DisputeCard/PeriodBanner.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import styled, { Theme } from "styled-components";
 import { Periods } from "consts/periods";
+import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div<Omit<IPeriodBanner, "id">>`
   height: ${({ isCard }) => (isCard ? "45px" : "100%")};
-  width: auto;
+  width: ${({ isCard }) => (isCard ? "auto" : responsiveSize(60, 80, 900))};
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
   display: flex;

web/src/components/DisputeCard/index.tsx

@@ -68,7 +68,7 @@ const ListTitle = styled.div`
   height: 100%;
   justify-content: start;
   align-items: center;
-  width: calc(30vw + (40 - 30) * (min(max(100vw, 300px), 1250px)- 300px) / 950);
+  width: ${responsiveSize(240, 300, 900)};
 `;
 
 export const getPeriodEndTimestamp = (