asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: fix pricing page on small devices (#13617)

Browse Source
This commit is contained in:
Shahed Nasser
2025-09-29 15:22:22 +03:00
committed by GitHub
parent da411e351a
commit 97cc8fdc15
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
www/apps/cloud/components/Pricing/FeatureSections/index.tsx
View File

@@ -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"
)}

14
www/apps/cloud/components/Pricing/HeroPricing/index.tsx
View File

@@ -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",
}}
>