Merge pull request #1556 from kleros/fix(web)/fix-list-view-style

fix(web): fix-list-view-style

Author: alcercu

web/src/components/CasesDisplay/StatsAndFilters.tsx

@@ -9,6 +9,7 @@ const Container = styled.div`
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 11px;
+  margin-bottom: 48px;
   justify-content: space-between;
 `;
 

web/src/components/CasesDisplay/index.tsx

@@ -13,13 +13,6 @@ import CasesGrid, { ICasesGrid } from "./CasesGrid";
 import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
 
-const Divider = styled.hr`
-  display: flex;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: ${responsiveSize(20, 24)};
-`;
 const TitleContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -72,7 +65,6 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
       </TitleContainer>
       <Search />
       <StatsAndFilters totalDisputes={numberDisputes ?? 0} closedDisputes={numberClosedDisputes ?? 0} />
-      <Divider />
 
       {disputes?.length === 0 ? (
         <h1>No cases found</h1>

web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

@@ -1,10 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-
+import { responsiveSize } from "styles/responsiveSize";
 import Field, { IField } from "components/Field";
-
 import CardLabel from "../CardLabels";
-
 import { FieldItem, IDisputeInfo } from ".";
 
 const Container = styled.div<{ isLabel?: boolean }>`
@@ -13,12 +11,14 @@ const Container = styled.div<{ isLabel?: boolean }>`
   height: 100%;
   flex-direction: row;
   justify-content: ${({ isLabel }) => (isLabel ? "space-between" : "flex-end")};
-  flex: 0 1 450px;
+  flex: 0 1 ${responsiveSize(400, 450, 900)};
   align-items: center;
+  padding-right: ${responsiveSize(12, 24, 900)};
+  gap: 8px;
 `;
 
 const RestOfFieldsContainer = styled.div`
-  gap: 8px;
+  gap: 8px ${responsiveSize(8, 32, 900)};
   align-items: center;
   height: min-content;
   width: max-content;

web/src/components/DisputeView/DisputeListView.tsx

@@ -23,7 +23,6 @@ const ListContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-right: 8px;
   flex-grow: 1;
 `;
 

web/src/components/Field.tsx

@@ -97,7 +97,13 @@ const Field: React.FC<IField> = ({
       <Icon />
       {(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
       {link ? (
-        <Link className="link value" to={link}>
+        <Link
+          className="link value"
+          to={link}
+          onClick={(event) => {
+            event.stopPropagation();
+          }}
+        >
           {value}
         </Link>
       ) : (