From 5b5b233dd07363ff607f5b45fd6b156988752e65 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Fri, 12 Jan 2024 12:23:46 +0530
Subject: [PATCH] fix(web): fix-cases-list-view-alignment

---
 .../CasesDisplay/CasesListHeader.tsx          | 22 ++++++++-----------
 .../components/DisputeCard/DisputeInfo.tsx    |  9 +++++---
 .../components/DisputeCard/PeriodBanner.tsx   |  3 ++-
 web/src/components/DisputeCard/index.tsx      |  2 +-
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/src/components/CasesDisplay/CasesListHeader.tsx b/web/src/components/CasesDisplay/CasesListHeader.tsx
index ad19963b2..bc3edb305 100644
--- a/web/src/components/CasesDisplay/CasesListHeader.tsx
+++ b/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: " +
diff --git a/web/src/components/DisputeCard/DisputeInfo.tsx b/web/src/components/DisputeCard/DisputeInfo.tsx
index b37550f04..cf7b431b8 100644
--- a/web/src/components/DisputeCard/DisputeInfo.tsx
+++ b/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;
         `
       )}
     `};
diff --git a/web/src/components/DisputeCard/PeriodBanner.tsx b/web/src/components/DisputeCard/PeriodBanner.tsx
index d85d681c7..dc62b3ff9 100644
--- a/web/src/components/DisputeCard/PeriodBanner.tsx
+++ b/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;
diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx
index 1d51d99a6..de0d4b955 100644
--- a/web/src/components/DisputeCard/index.tsx
+++ b/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 = (