fix: custom calculation extraction to be full classes instead of string interpolation

Author: kyrers

web/src/components/RegistryCard/RegistryInfo.tsx

@@ -18,8 +18,8 @@ interface IListInfo {
   isListView?: boolean;
 }
 
-const firstColWidthCalc = "calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))";
-const secondColWidthCalc = "calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))";
+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]";
 
 const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -39,8 +39,8 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
           "w-full h-max lg:h-16 p-4",
           "[&_h3]:col-span-4 [&_img]:col-span-4",
           "lg:justify-between lg:grid-rows-[1fr] lg:px-8",
-          `lg:grid-cols-[auto_1fr_${firstColWidthCalc}_${secondColWidthCalc}_max-content]`,
           "lg:[&_img]:col-span-1 lg:[&_h3]:col-span-2",
+          landscapeGridColsCalc,
         ]
       )}
       style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}

web/src/components/StatDisplay.tsx

@@ -11,11 +11,11 @@ interface IStatDisplay {
   color: IColors;
 }
 
-const marginBottomCalc = "calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))";
+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={clsx("flex items-center gap-2 max-w-[192px]", `lg:mb-[${marginBottomCalc}]`)} {...props}>
+    <div className={clsx("flex items-center gap-2 max-w-[192px]", landscapeMarginBottomCalc)} {...props}>
       <div
         className={cn(
           "flex items-center justify-center h-12 w-12 rounded-[50%]",

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

@@ -82,7 +82,7 @@ interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
-const widthCalc = "calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))";
+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);
@@ -97,7 +97,7 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
         "bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)]",
         "[&_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]",
-        `lg:w-[${widthCalc}]`
+        landscapeWidthCalc
       )}
     >
       <h1 className="pt-6 text-2xl font-semibold leading-8">Kleros Solutions</h1>

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

@@ -22,8 +22,8 @@ const TABS = [
   },
 ];
 
-const inlinePaddingCalc = "calc(8px+(32-8)*((100vw-300px)/(1250-300)))";
-const widthCalc = "calc(300px+(424-300)*((100vw-300px)/(1250-300)))";
+const inlinePaddingCalc = "px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))]";
+const landscapeWidthCalc = "lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]";
 
 const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const [currentTab, setCurrentTab] = useState<number>(0);
@@ -46,7 +46,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
     >
       <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
       <Tabs
-        className={clsx(`py-0 px-[${inlinePaddingCalc}]`, `max-w-[660px] w-[86vw] lg:w-[${widthCalc}]`)}
+        className={clsx(`py-0 ${inlinePaddingCalc}`, `max-w-[660px] w-[86vw] ${landscapeWidthCalc}`)}
         items={TABS}
         callback={(_, value: number) => {
           setCurrentTab(value);

web/src/pages/Home/index.tsx

@@ -6,16 +6,16 @@ import Header from "./Header";
 import Stats from "./Stats";
 import HighlightedLists from "./Highlights";
 
-const inlinePaddingCalc = "calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))";
+const landscapeInlinePaddingCalc = "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
 
 const Home: React.FC = () => {
   return (
     <>
       <HeroImage />
       <div
         className={clsx(
-          "w-full max-w-[1400px] mx-auto bg-klerosUIComponentsLightBackground px-4 pt-4 pb-10",
-          `lg:px-[${inlinePaddingCalc}] lg:pb-[60px]`
+          "w-full max-w-landscape mx-auto bg-klerosUIComponentsLightBackground px-4 pt-4 pb-10",
+          `${landscapeInlinePaddingCalc} lg:pb-[60px]`
         )}
       >
         <Header />