From 97cc8fdc158651f013221945212501418e6a5175 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 29 Sep 2025 15:22:22 +0300
Subject: [PATCH] docs: fix pricing page on small devices (#13617)

---
 .../Pricing/FeatureSections/index.tsx         | 22 +++++++++++--------
 .../components/Pricing/HeroPricing/index.tsx  | 14 ++++++++----
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/www/apps/cloud/components/Pricing/FeatureSections/index.tsx b/www/apps/cloud/components/Pricing/FeatureSections/index.tsx
index 2f676f002c..227670f1f1 100644
--- a/www/apps/cloud/components/Pricing/FeatureSections/index.tsx
+++ b/www/apps/cloud/components/Pricing/FeatureSections/index.tsx
@@ -13,6 +13,7 @@ import {
   CurrencyDollar,
   ServerStack,
   Shopping,
+  Users,
   WIP,
 } from "@medusajs/icons"
 
@@ -56,6 +57,7 @@ const featureIcons: Record<string, React.FC> = {
   "Hosting & Deployment": ServerStack,
   "Compute & Resources": WIP,
   "Organization & Billing": CurrencyDollar,
+  "Medusa Support": Users,
 }
 
 // Helper function to render Block content (Sanity rich text)
@@ -97,11 +99,11 @@ const FeatureSections: React.FC<FeatureSectionsProps> = ({
   // Calculate consistent column widths
   // Use fractional units to ensure all grids have matching column sizes
   const featureNameFraction = 2 // Feature name gets 2 units
-  const featureColumnFraction = 1 // Each feature column gets 1 unit
-  const gridTemplate = `${featureNameFraction}fr repeat(${columnCount}, ${featureColumnFraction}fr)`
+  const featureColumnFraction = `minmax(0, 1fr)` // Each feature column gets 1 unit
+  const gridTemplate = `${featureNameFraction}fr repeat(${columnCount}, ${featureColumnFraction})`
 
   return (
-    <div className="w-full flex flex-col rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark">
+    <div className="w-full flex flex-col rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark overflow-hidden">
       {/* Header */}
       <div
         className="w-full grid gap-0 rounded-t"
@@ -110,8 +112,10 @@ const FeatureSections: React.FC<FeatureSectionsProps> = ({
         }}
       >
         {/* Features label column */}
-        <div className="flex items-center justify-start px-1.5 py-1 border-solid border-r border-medusa-border-base">
-          <p className="txt-large text-medusa-fg-subtle">Features</p>
+        <div className="flex items-center justify-start p-0.5 sm:px-1.5 sm:py-1 border-solid border-r border-medusa-border-base">
+          <p className="txt-medium sm:txt-large text-medusa-fg-subtle">
+            Features
+          </p>
         </div>
 
         {/* Column headers */}
@@ -119,12 +123,12 @@ const FeatureSections: React.FC<FeatureSectionsProps> = ({
           <div
             key={index}
             className={clsx(
-              "flex items-center justify-center px-1 py-1 bg-medusa-bg-base",
+              "flex items-center justify-center p-0.25 sm:p-1 bg-medusa-bg-base",
               index !== columns.length - 1 &&
                 "border-solid border-r border-medusa-border-base"
             )}
           >
-            <p className="txt-large text-medusa-fg-base text-left w-full">
+            <p className="txt-medium sm:txt-large text-medusa-fg-base text-left w-full">
               {column}
             </p>
           </div>
@@ -167,7 +171,7 @@ const FeatureSections: React.FC<FeatureSectionsProps> = ({
                   }}
                 >
                   {/* Feature name column */}
-                  <div className="px-1 py-1 flex items-center justify-start border-solid border-r border-medusa-border-base">
+                  <div className="p-0.25 sm:p-1 flex items-center justify-start border-solid border-r border-medusa-border-base">
                     <p className="txt-medium-plus text-medusa-fg-base">
                       <MarkdownContent
                         allowedElements={["br", "a"]}
@@ -189,7 +193,7 @@ const FeatureSections: React.FC<FeatureSectionsProps> = ({
                       <div
                         key={colIndex}
                         className={clsx(
-                          "px-1 py-1 flex items-center justify-center",
+                          "p-0.25 sm:p-1 flex items-center justify-center",
                           colIndex !== columnCount - 1 &&
                             "border-solid border-r border-medusa-border-base"
                         )}
diff --git a/www/apps/cloud/components/Pricing/HeroPricing/index.tsx b/www/apps/cloud/components/Pricing/HeroPricing/index.tsx
index bf522d0e12..bfe45f85fd 100644
--- a/www/apps/cloud/components/Pricing/HeroPricing/index.tsx
+++ b/www/apps/cloud/components/Pricing/HeroPricing/index.tsx
@@ -20,12 +20,18 @@ const HeroPricing: React.FC<HeroPricingProps> = ({ data }) => {
       {/* Header Row */}
       <div className="flex items-start justify-start">
         {/* Main content area */}
-        <div className="w-full flex items-center justify-start">
+        <div
+          className="w-full grid gap-0"
+          style={{
+            gridTemplateColumns: `repeat(${data.options.length}, minmax(0, 1fr))`,
+            gridTemplateRows: "auto 1fr auto",
+          }}
+        >
           {data.options.map((option, index) => (
             <React.Fragment key={option._key}>
               <div
                 className={clsx(
-                  `flex-1 min-w-0 p-1`,
+                  `p-1`,
                   index !== data.options.length - 1 &&
                     "border-solid border-r border-medusa-border-base",
                   index === data.options.length - 1 &&
@@ -59,9 +65,9 @@ const HeroPricing: React.FC<HeroPricingProps> = ({ data }) => {
 
       {/* Features and Buttons Row */}
       <div
-        className="w-full grid gap-0"
+        className="w-full grid gap-0 overflow-hidden"
         style={{
-          gridTemplateColumns: `repeat(${data.options.length}, 1fr)`,
+          gridTemplateColumns: `repeat(${data.options.length}, minmax(0, 1fr))`,
           gridTemplateRows: "auto 1fr auto",
         }}
       >