refactor: migrate complex CSS calculations to clamp

web/src/components/InfoCard.tsx

@@ -1,7 +1,6 @@
+import clsx from "clsx";
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import InfoCircle from "svgs/icons/info-circle.svg";
-import { cn } from "src/utils";
 
 interface IInfoCard {
   msg: string;
@@ -11,12 +10,11 @@ interface IInfoCard {
 const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
   return (
     <div
-      className={cn(
-        "grid grid-cols-[16px_auto] items-center justify-start",
+      className={clsx(
+        "grid grid-cols-[16px_auto] gap-fluid-6-8-300 items-center justify-start",
         "text-start text-klerosUIComponentsSecondaryText",
         className
       )}
-      style={{ gap: responsiveSize(6, 8, 300) }}
     >
       <InfoCircle />
       {msg}

web/src/components/InformationCards/ItemInformationCard/index.tsx

@@ -4,7 +4,6 @@ import Skeleton from "react-loading-skeleton";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import ActionButton from "components/ActionButton";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
-import { responsiveSize } from "styles/responsiveSize";
 import { Policies } from "../RegistryInformationCard/Policies";
 import FieldsDisplay from "./FieldsDisplay";
 import StatusDisplay from "../StatusDisplay";
@@ -61,10 +60,7 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
           <StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
         </div>
       </div>
-      <hr
-        className="border-none h-px bg-klerosUIComponentsStroke mx-8"
-        style={{ marginBlock: responsiveSize(20, 28) }}
-      />
+      <hr className="border-none h-px bg-klerosUIComponentsStroke mx-8 my-fluid-20-28" />
       <div className="flex px-8 pb-3 flex-wrap gap-3 justify-between">
         {registerer?.id ? (
           <div className={aliasContainerStyle}>

web/src/components/InformationCards/RegistryInformationCard/Policies.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import Skeleton from "react-loading-skeleton";
 
 import PolicyIcon from "svgs/icons/policy.svg";
@@ -26,14 +24,13 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
     <div
       className={clsx(
         "flex flex-col justify-center lg:flex-row lg:justify-between",
-        "w-full py-6 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
+        "w-full py-6 px-fluid-24-32 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
       )}
-      style={{ paddingInline: responsiveSize(24, 32) }}
     >
       <p className="text-sm leading-6 text-klerosUIComponentsPrimaryBlue mb-4 lg:mb-0">
         Make sure you read and understand the Policies
       </p>
-      <div className="flex flex-wrap" style={{ gap: responsiveSize(16, 24) }}>
+      <div className="flex flex-wrap gap-fluid-16-24">
         {!isItem ? (
           <>
             {parentRegistryDetails ? (

web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx

@@ -4,14 +4,13 @@ import Skeleton from "react-loading-skeleton";
 import { RegistryDetails } from "context/RegistryDetailsContext";
 import StatusDisplay from "../StatusDisplay";
 import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "src/consts/chains";
-import { responsiveSize } from "src/styles/responsiveSize";
-import { cn, isUndefined } from "src/utils";
+import { isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
 import { Link } from "react-router-dom";
+import clsx from "clsx";
 
-const landscapeColumnGapCalc = "lg:gap-x-[calc(24px+(32-24)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
 interface ITopInfo
   extends Pick<
     RegistryDetails,
@@ -33,11 +32,8 @@ const TopInfo: React.FC<ITopInfo> = ({
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? ""));
   useEffect(() => setImageSrc(getIpfsUrl(logoURI ?? "")), [logoURI]);
   return (
-    <div
-      className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3"
-      style={{ paddingTop: responsiveSize(20, 24), paddingInline: responsiveSize(24, 32) }}
-    >
-      <div className="flex flex-col" style={{ rowGap: responsiveSize(8, 16) }}>
+    <div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3 pt-fluid-20-24 px-fluid-24-32">
+      <div className="flex flex-col gap-y-fluid-8-16">
         <div className="flex flex-wrap items-center gap-4">
           {isUndefined(logoURI) ? (
             <Skeleton width={125} height={125} borderRadius="62.5px" className="mb-2" />
@@ -60,10 +56,9 @@ const TopInfo: React.FC<ITopInfo> = ({
         )}
       </div>
       <div
-        className={cn(
+        className={clsx(
           "flex flex-row flex-wrap shrink gap-8 items-start pt-5",
-          "lg:shrink-0 lg:gap-y-0",
-          landscapeColumnGapCalc
+          "lg:shrink-0 lg:gap-x-fluid-24-32-900 lg:gap-y-0"
         )}
       >
         {id !== "" ? (

web/src/components/InformationCards/RegistryInformationCard/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card, Copiable } from "@kleros/ui-components-library";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
@@ -71,11 +70,8 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
           registryAddress: parentRegistryAddress,
         }}
       />
-      <hr
-        className="border-none h-px bg-klerosUIComponentsStroke"
-        style={{ marginBlock: responsiveSize(20, 28), marginInline: responsiveSize(24, 32) }}
-      />
-      <div className="flex flex-wrap justify-between gap-5 pb-3" style={{ paddingInline: responsiveSize(24, 32) }}>
+      <hr className="border-none h-px bg-klerosUIComponentsStroke my-fluid-20-28 mx-fluid-24-32" />
+      <div className="flex flex-wrap justify-between gap-5 pb-3 px-fluid-24-32">
         <div className="flex flex-wrap gap-2 items-center leading-18px">
           <small className="text-sm font-semibold leading-18px text-klerosUIComponentsPrimaryText">Submitted by:</small>
           <Copiable copiableContent={registerer?.id ?? ""} tooltipProps={{ small: true }}>

web/src/components/ItemCard/index.tsx

@@ -1,17 +1,13 @@
 import React from "react";
 import { Button, Card } from "@kleros/ui-components-library";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
-import { responsiveSize } from "styles/responsiveSize";
 import StatusBanner, { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 import ArrowIcon from "svgs/icons/arrow.svg";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import ItemField from "./ItemField";
-import { cn } from "src/utils";
 import clsx from "clsx";
 
-const landscapeGridColsCalc =
-  "lg:grid-cols-[1fr_calc(150px+(180-150)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
-const landscapeGapCalc = "lg:gap-[calc(16px+(36-16)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
+const landscapeGridColsCalc = "lg:grid-cols-[1fr_var(--spacing-fluid-150-180-900)_max-content]";
 
 interface IItemCard extends ItemDetailsFragment {}
 
@@ -28,19 +24,17 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
       onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}
     >
       <div
-        className={cn(
+        className={clsx(
           "grid grid-rows-[repeat(3,min-content)] grid-cols-[1fr_min-content]",
-          "w-full h-max p-4 gap-y-2 items-center",
+          "w-full h-max p-4 gap-y-2 gap-x-fluid-12-32-900 items-center",
           "lg:h-16 lg:justify-between lg:grid-rows-[1fr] lg:py-0 lg:px-8",
           landscapeGridColsCalc
         )}
-        style={{ columnGap: responsiveSize(12, 32, 900) }}
       >
         <div
-          className={cn(
+          className={clsx(
             "flex flex-col justify-between items-start gap-4 w-fit col-span-2",
-            "lg:flex-row lg:items-center lg:col-span-1",
-            landscapeGapCalc
+            "lg:flex-row lg:items-center lg:col-span-1 lg:gap-fluid-16-36-900"
           )}
         >
           {sortedProps.map((prop) => prop.isIdentifier && <ItemField key={prop.label} {...prop} />)}

web/src/components/RegistryCard/RegistryInfo.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import Skeleton from "react-loading-skeleton";
 import { Button } from "@kleros/ui-components-library";
 import ArrowIcon from "svgs/icons/arrow.svg";
@@ -19,7 +18,7 @@ interface IListInfo {
 }
 
 const landscapeGridColsCalc =
-  "lg:grid-cols-[auto_1fr_calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
+  "lg:grid-cols-[auto_1fr_var(--spacing-fluid-80-100-900)_var(--spacing-fluid-100-150-900)_max-content]";
 
 const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -35,15 +34,14 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
       className={cn(
         "flex flex-col justify-center items-center gap-2 h-[calc(100%-45px)]",
         isListView && [
-          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
+          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4 gap-x-fluid-8-24-900",
           "w-full h-max lg:h-16 p-4",
           "[&_img]:col-span-4",
           "lg:justify-between lg:grid-rows-[1fr] lg:px-8 lg:py-0",
           "lg:[&_img]:col-span-1",
           landscapeGridColsCalc,
         ]
       )}
-      style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}
     >
       {!imageLoaded ? (
         <Skeleton

web/src/components/StatDisplay.tsx

@@ -10,11 +10,9 @@ interface IStatDisplay {
   color: IColors;
 }
 
-const landscapeMarginBottomCalc = "lg:mb-[calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
   return (
-    <div className={cn("flex items-center gap-2 max-w-[192px]", landscapeMarginBottomCalc)} {...props}>
+    <div className="flex items-center gap-2 max-w-[192px] lg:mb-fluid-16-30" {...props}>
       <div
         className={cn(
           "flex items-center justify-center h-12 w-12 rounded-[50%]",

web/src/components/StyledSkeleton.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Skeleton from "react-loading-skeleton";
-import { responsiveSize } from "styles/responsiveSize";
 
 export const HistorySkeletonCard = () => (
   <div className="flex flex-col gap-2">
@@ -11,17 +10,13 @@ export const HistorySkeletonCard = () => (
   </div>
 );
 
-export const SkeletonRegistryCard = () => (
-  <div className="w-full">
-    <Skeleton height={responsiveSize(270, 296)} />
-  </div>
-);
+export const SkeletonRegistryCard = () => <Skeleton className="w-full h-fluid-270-296" />;
 
 export const SkeletonJustificationCard = () => (
   <div className="flex flex-col gap-4 w-full">
-    <Skeleton className="ml-auto" height={24} width={responsiveSize(100, 160)} />
+    <Skeleton className="ml-auto w-fluid-100-160" height={24} />
     <Skeleton height={60} />
-    <Skeleton height={24} width={responsiveSize(60, 80)} />
+    <Skeleton className="w-fluid-60-80" height={24} />
   </div>
 );
 

web/src/global.css

@@ -24,6 +24,61 @@
   --max-width-landscape: 87.5rem;
   --shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
   --leading-18px: 18px;
+
+  /* 
+  * Spacing utils for custom sizing
+  * Default max screen width is 1250px
+  * Default min screen width is 375px
+  */
+  --spacing-scale-8-32-300: calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300));
+  --spacing-scale-300-424-300: calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300));
+
+  /* 
+  * Spacing utils for responsive resizing
+  * Default max screen width is 1250px
+  * Default min screen width is 375px
+  */
+  --spacing-fluid-0-16: clamp(0px, calc(0px + (16 - 0) * (100vw - 375px) / (1250 - 375)), 16px);
+  --spacing-fluid-0-108: clamp(0px, calc(0px + (108 - 0) * (100vw - 375px) / (1250 - 375)), 108px);
+  --spacing-fluid-0-132: clamp(0px, calc(0px + (132 - 0) * (100vw - 375px) / (1250 - 375)), 132px);
+  --spacing-fluid-4-8: clamp(4px, calc(4px + (8 - 4) * (100vw - 375px) / (1250 - 375)), 8px);
+  --spacing-fluid-6-8-300: clamp(6px, calc(6px + (8 - 6) * (100vw - 300px) / (1250 - 300)), 8px);
+  --spacing-fluid-8-16: clamp(8px, calc(8px + (16 - 8) * (100vw - 375px) / (1250 - 375)), 16px);
+  --spacing-fluid-8-24: clamp(8px, calc(8px + (24 - 8) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-8-24-900: clamp(8px, calc(8px + (24 - 8) * (100vw - 900px) / (1250 - 900)), 24px);
+  --spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
+  --spacing-fluid-10-130: clamp(10px, calc(10px + (130 - 10) * (100vw - 375px) / (1250 - 375)), 130px);
+  --spacing-fluid-12-32-300: clamp(12px, calc(12px + (32 - 12) * (100vw - 300px) / (1250 - 300)), 32px);
+  --spacing-fluid-12-32-900: clamp(12px, calc(12px + (32 - 12) * (100vw - 900px) / (1250 - 900)), 32px);
+  --spacing-fluid-16-24: clamp(16px, calc(16px + (24 - 16) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-16-30: clamp(16px, calc(16px + (30 - 16) * (100vw - 375px) / (1250 - 375)), 30px);
+  --spacing-fluid-16-36-900: clamp(16px, calc(16px + (36 - 16) * (100vw - 900px) / (1250 - 900)), 36px);
+  --spacing-fluid-16-54: clamp(16px, calc(16px + (54 - 16) * (100vw - 375px) / (1250 - 375)), 54px);
+  --spacing-fluid-20-24: clamp(20px, calc(20px + (24 - 20) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-20-28: clamp(20px, calc(20px + (28 - 20) * (100vw - 375px) / (1250 - 375)), 28px);
+  --spacing-fluid-24-28: clamp(24px, calc(24px + (28 - 24) * (100vw - 375px) / (1250 - 375)), 28px);
+  --spacing-fluid-24-32: clamp(24px, calc(24px + (32 - 24) * (100vw - 375px) / (1250 - 375)), 32px);
+  --spacing-fluid-24-48: clamp(24px, calc(24px + (48 - 24) * (100vw - 375px) / (1250 - 375)), 48px);
+  --spacing-fluid-24-32-900: clamp(24px, calc(24px + (32 - 24) * (100vw - 900px) / (1250 - 900)), 32px);
+  --spacing-fluid-24-136: clamp(24px, calc(24px + (136 - 24) * (100vw - 375px) / (1250 - 375)), 136px);
+  --spacing-fluid-25-65: clamp(25px, calc(25px + (65 - 25) * (100vw - 375px) / (1250 - 375)), 65px);
+  --spacing-fluid-32-24: clamp(24px, calc(32px + (24 - 32) * (100vw - 375px) / (1250 - 375)), 32px);
+  --spacing-fluid-32-80: clamp(32px, calc(32px + (80 - 32) * (100vw - 375px) / (1250 - 375)), 80px);
+  --spacing-fluid-60-80: clamp(60px, calc(60px + (80 - 60) * (100vw - 375px) / (1250 - 375)), 80px);
+  --spacing-fluid-68-40: clamp(40px, calc(68px + (40 - 68) * (100vw - 375px) / (1250 - 375)), 68px);
+  --spacing-fluid-76-96: clamp(76px, calc(76px + (96 - 76) * (100vw - 375px) / (1250 - 375)), 96px);
+  --spacing-fluid-80-100-900: clamp(80px, calc(80px + (100 - 80) * (100vw - 900px) / (1250 - 900)), 100px);
+  --spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
+  --spacing-fluid-100-150-900: clamp(100px, calc(100px + (150 - 100) * (100vw - 900px) / (1250 - 900)), 150px);
+  --spacing-fluid-100-160: clamp(100px, calc(100px + (160 - 100) * (100vw - 375px) / (1250 - 375)), 160px);
+  --spacing-fluid-150-72: clamp(72px, calc(150px + (72 - 150) * (100vw - 375px) / (1250 - 375)), 150px);
+  --spacing-fluid-150-180-900: clamp(150px, calc(150px + (180 - 150) * (100vw - 900px) / (1250 - 900)), 180px);
+  --spacing-fluid-200-720: clamp(200px, calc(200px + (720 - 200) * (100vw - 375px) / (1250 - 375)), 720px);
+  --spacing-fluid-270-296: clamp(270px, calc(270px + (296 - 270) * (100vw - 375px) / (1250 - 375)), 296px);
+  --spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
+  --spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
+  --spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);
+  --spacing-fluid-442-700-900: clamp(442px, calc(442px + (700 - 442) * (100vw - 900px) / (1250 - 900)), 700px);
 }
 
 .dark {

web/src/layout/Header/DesktopHeader.tsx

@@ -8,8 +8,6 @@ import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import OverlayPortal from "components/OverlayPortal";
@@ -44,7 +42,7 @@ const DesktopHeader: React.FC = () => {
           <Explore />
         </div>
 
-        <div className="flex ml-2 [&_canvas]:w-5" style={{ gap: responsiveSize(4, 8) }}>
+        <div className="flex gap-fluid-4-8 ml-2 [&_canvas]:w-5">
           <div
             className="[&_label]:cursor-pointer [&_label]:text-white/80"
             onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}

web/src/layout/Header/navbar/DappList.tsx

@@ -10,8 +10,6 @@ import Court from "svgs/icons/kleros.svg";
 import POH from "svgs/icons/poh-image.png";
 import Vea from "svgs/icons/vea.svg";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import Product from "./Product";
 import clsx from "clsx";
 
@@ -82,8 +80,6 @@ interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
-const landscapeWidthCalc = "lg:w-[calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsDappListOpen());
@@ -97,17 +93,16 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
         "border border-klerosUIComponentsStroke rounded-[3px]",
         "bg-klerosUIComponentsWhiteBackground shadow-custom",
         "[&_svg]:visible",
-        "lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]",
-        landscapeWidthCalc
+        "lg:w-fluid-300-480 lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]"
       )}
     >
       <h1 className="pt-6 mb-4">Kleros Solutions</h1>
       <div
         className={clsx(
           "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))]",
-          "overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px]"
+          "overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center w-fluid-300-480",
+          "pt-1 pb-4 px-fluid-8-24"
         )}
-        style={{ padding: `4px ${responsiveSize(8, 24)} 16px`, width: responsiveSize(300, 480) }}
       >
         {ITEMS.map((item) => {
           return <Product {...item} key={item.text} />;

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

@@ -6,8 +6,6 @@ import { Button } from "@kleros/ui-components-library";
 
 import { EMAIL_REGEX } from "consts/index";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import { ISettings } from "../../../../index";
 
 import EmailVerificationInfo from "./EmailVerificationInfo";
@@ -72,11 +70,7 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   };
 
   return (
-    <form
-      className="w-full relative flex flex-col py-0 pb-4 gap-4"
-      style={{ paddingInline: responsiveSize(12, 32, 300) }}
-      onSubmit={handleSubmit}
-    >
+    <form className="w-full relative flex flex-col gap-4 py-0 pb-4 px-fluid-12-32-300" onSubmit={handleSubmit}>
       {/* <FormContactContainer>
         <FormContact
           contactLabel="Telegram"