fix(frontend): improve responsiveness tables

alcercu · alcercu · commit ae5776bb1ec2 · 2025-02-06T17:55:21.000+01:00
diff --git a/frontend/src/app/for-lawyers/components/Flowchart.tsx b/frontend/src/app/for-lawyers/components/Flowchart.tsx
@@ -13,7 +13,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
   background,
 }) => {
   return (
-    <div className="flex w-[284px] flex-col gap-6">
+    <div className="flex max-w-[270px] flex-col gap-6">
       <div
         className={clsx(
           "h-[148px] rounded-2xl bg-[linear-gradient(90deg,_#D38BFF_0%,_#9747FF_100%)]",
@@ -60,7 +60,11 @@ interface IFlowchart {
 
 const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
   return (
-    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-center">
+    <div
+      className={
+        "mx-auto grid w-fit grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
+      }
+    >
       {items.map((item) => (
         <FlowchartItem key={item.name} {...item} background={background} />
       ))}
diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -18,7 +18,7 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-3xl">
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
         <p className="max-w-[685px] text-lg">{subtitle}</p>
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
@@ -12,7 +12,11 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
   table,
 }) => {
   return (
-    <div className="relative h-fit min-h-[1125px] w-full lg:min-h-[500px]">
+    <div
+      className={
+        "relative h-fit min-h-[1125px] w-full lg:min-h-[500px] lg:px-32"
+      }
+    >
       <div
         className={clsx(
           "box-border rounded-3xl border-2 border-stroke bg-background-2",
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
@@ -23,23 +23,37 @@ const KlerosEscrowSection: React.FC = async () => {
   ).forLawyersPageKlerosEscrowSection;
   return (
     <div>
-      <h1 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
+      <h1
+        className={
+          "mb-6 text-lg font-medium text-primary-text lg:px-32 lg:text-2xl"
+        }
+      >
         {header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:text-lg">{subtitle}</p>
+      <p className="mb-16 text-secondary-text lg:px-32 lg:text-lg">
+        {subtitle}
+      </p>
 
-      <p className="mb-12 text-primary-purple lg:text-lg">{flowchartLabel}</p>
+      <p className="mb-12 text-primary-purple lg:px-32 lg:text-lg">
+        {flowchartLabel}
+      </p>
       <Flowchart items={flowchart} background="secondary" />
 
-      <h2 className="mb-6 mt-12 text-lg font-medium text-primary-text lg:text-xl">
+      <h2
+        className={
+          "mb-6 mt-12 text-lg font-medium text-primary-text lg:px-32 lg:text-xl"
+        }
+      >
         {secondHeader}
       </h2>
-      <p className="mb-8 text-secondary-text lg:text-lg">{secondSubtitle}</p>
+      <p className="mb-8 text-secondary-text lg:px-32 lg:text-lg">
+        {secondSubtitle}
+      </p>
 
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="flex-wrap justify-center lg:justify-start"
+        className="flex-wrap justify-center lg:justify-start lg:px-32"
       />
     </div>
   );
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
@@ -36,7 +36,7 @@ const ResearchSection: React.FC<IResearchSection> = ({
   );
 
   return (
-    <div>
+    <div className="lg:px-32">
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
         {secondHeader}
       </h2>
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
@@ -32,10 +32,10 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       className={clsx(
         "bg-background-2",
         "flex flex-col gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="mb-6 text-primary-purple lg:text-lg">
           {headerSubtitle}
         </h3>
@@ -48,7 +48,7 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       <ArbitrationMethodTable table={arbitrationMethodTable} />
       <ResearchSection {...{ secondHeader, secondSubtitle, publications }} />
 
-      <div className="my-4">
+      <div className="my-4 lg:px-32">
         <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
           {thirdHeader}
         </h2>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
@@ -14,7 +14,7 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
   processDiagram,
 }) => {
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-8 lg:px-32">
       <HighlightedText
         {...disputeResolutionProcessHeader}
         fullTextStyle="!text-primary-text !text-lg !font-medium lg:!text-xl"
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
@@ -20,7 +20,7 @@ const LemonCashSection: React.FC = async () => {
     .lemonCashSection;
 
   return (
-    <div>
+    <div className="lg:px-32">
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
         {header}
       </h2>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
@@ -41,7 +41,9 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
               rowIndex !== tableRows.length - 1 && "border-b border-b-stroke",
             )}
           >
-            <span className="break-words text-lg font-medium text-primary-purple">
+            <span
+              className={"break-words text-lg font-medium text-primary-purple"}
+            >
               {rowHeading}
             </span>
           </div>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
@@ -34,18 +34,18 @@ const KlerosEnterpriseSection: React.FC = async () => {
       className={clsx(
         "bg-background-2",
         "flex flex-col gap-12 lg:gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
         <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
           {header}
         </h1>
         <HighlightedText {...subtitle} />
       </div>
 
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:px-32">
         {cards.map((card) => (
           <Card key={card.title} {...card} />
         ))}
@@ -62,7 +62,7 @@ const KlerosEnterpriseSection: React.FC = async () => {
       <ExternalLink
         url={arrowLink.link.url}
         text={arrowLink.text}
-        className="flex-wrap justify-center"
+        className="flex-wrap justify-center lg:px-32"
       />
       <MethodsTable {...{ table }} />
     </div>
diff --git a/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
@@ -21,10 +21,10 @@ const KlerosMediationSection: React.FC = async () => {
       className={clsx(
         "bg-background-1",
         "flex flex-col gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 lg:px-32">
         <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
           {header}
         </h1>
@@ -33,7 +33,7 @@ const KlerosMediationSection: React.FC = async () => {
 
       <Flowchart items={flowchart} background="primary" />
 
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 lg:px-32">
         <h2 className="text-lg text-primary-text lg:text-xl">
           {benefitsHeader}
         </h2>
diff --git a/frontend/src/app/home/components/Hero.tsx b/frontend/src/app/home/components/Hero.tsx
@@ -26,7 +26,7 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
       <div className="space-y-8">
-        <h1 className="text-2xl font-medium lg:text-3xl">{title}</h1>
+        <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
         <div className="lg:hidden">
           <CustomLink href={primaryButton.link.url}>
diff --git a/frontend/src/app/home/components/UseCases.tsx b/frontend/src/app/home/components/UseCases.tsx
@@ -12,7 +12,11 @@ const UseCases: React.FC = async () => {
   ).then((res) => res.homeUseCasesSection);
 
   return (
-    <div className="space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24">
+    <div
+      className={
+        "space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
+      }
+    >
       <h3 className="text-xl font-medium lg:text-3xl"> {title} </h3>
       <UseCasesCards />
       <ExternalLink
diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import clsx from "clsx";
 import Image from "next/image";
 
 import { HeroQueryType } from "@/queries/earn/hero";
@@ -16,7 +17,12 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
 
-        <div className="flex items-center gap-8 rounded-full bg-background-translucent p-4 pr-8 md:w-fit">
+        <div
+          className={clsx(
+            "flex w-fit items-center gap-8 rounded-full",
+            "bg-background-translucent p-4 pr-8",
+          )}
+        >
           <Image
             src={statDisplay.icon.url}
             alt="icon"
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
@@ -21,7 +21,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
         "flex flex-col gap-8 px-6 py-8 md:px-8 md:py-12",
       )}
     >
-      <div className="flex flex-col gap-6 md:flex-row">
+      <div className="flex flex-row gap-6">
         <Image
           width={128}
           height={128}
@@ -30,20 +30,25 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
           alt="Product Icon"
         />
         <div className="flex flex-col gap-4">
-          <div className="text-primary-purple lg:text-lg">{header}</div>
-          <div className="text-lg text-primary-text md:text-2xl">
+          <span className="text-primary-purple lg:text-lg">{header}</span>
+          <span className="text-lg text-primary-text md:text-2xl">
             {productName}
-          </div>
+          </span>
         </div>
       </div>
       <div
-        style={{ backgroundImage: `url(${background.url})` }}
         className={clsx(
           "relative h-[308px] rounded-2xl md:h-[380px]",
           "bg-cover bg-[-314px] md:bg-[0px]",
           "flex items-center justify-center pt-3 md:pt-0",
         )}
       >
+        <Image
+          src={background.url}
+          alt="Background Image"
+          fill
+          className="rounded-2xl object-cover object-[65%]"
+        />
         <CustomLink
           href={learnMoreButton.link.url}
           className="z-[1] mt-16 md:mt-0"
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
@@ -13,7 +13,11 @@ const EnterCourtSection: React.FC<IEnterCourtSection> = ({
   background,
 }) => {
   return (
-    <div className="relative mt-16 flex w-full flex-col items-center justify-center p-8">
+    <div
+      className={
+        "relative mt-16 flex w-full flex-col items-center justify-center p-8"
+      }
+    >
       <CustomLink href={button.link.url} className="z-[1] mb-8">
         <Button>
           <span className="text-background-2">{button.text}</span>
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
@@ -19,7 +19,7 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
       className={clsx("block w-fit hover:brightness-[1.2]", className)}
     >
       <span className="text-center text-primary-blue md:text-lg">
-        <span className="mr-4"> {text} </span>
+        <span className="mr-2 md:mr-4"> {text} </span>
         <Image
           src={LinkArrow}
           width="24"
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
@@ -18,12 +18,14 @@ const Header: React.FC<IHeader> = ({ useCasesData }) => {
       </p>
       <ResponsiveImage
         mobileProps={{
+          className: "mx-auto",
           src: useCasesData.useCaseBanner.mobile.url,
           alt: "UseCaseBanner mobile",
-          width: 400,
-          height: 835,
+          width: 294,
+          height: 798,
         }}
         desktopProps={{
+          className: "mx-auto",
           src: useCasesData.useCaseBanner.desktop.url,
           alt: "UseCaseBanner mobile",
           width: 1182,
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -28,6 +28,7 @@ const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
       {...{ onClick }}
     >
       <Image
+        className="md:h-fit"
         src={solution?.logo_svg?.url}
         alt={solution?.solution_name}
         width={64}
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -19,8 +19,9 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   <div className={clsx(className, "mx-auto lg:max-w-[1172px]")}>
     <div
       className={clsx(
-        "grid w-full grid-cols-1 gap-3 bg-background-2 lg:grid-flow-col",
-        "lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
+        "grid w-full grid-cols-1 gap-3 bg-background-2",
+        "md:grid-cols-2 md:grid-rows-5",
+        "lg:grid-flow-col lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
       )}
     >
       {appsSection?.solutions.map((solution, i) => (
@@ -49,9 +50,9 @@ const getVariant = (index: number): "large" | "medium" | "small" => {
 
 const getRowSpan = (
   index: number,
-): "lg:row-span-4" | "lg:row-span-2" | undefined => {
-  if (index === 0) return "lg:row-span-4";
-  if (index < 3) return "lg:row-span-2";
+): "md:row-span-2 lg:row-span-4" | "md:row-span-2" | undefined => {
+  if (index === 0) return "md:row-span-2 lg:row-span-4";
+  if (index < 3) return "md:row-span-2";
 };
 
 export default AppsDropdownContent;
