jeffrey/wwwfiberdirekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: iPad portrait layout fixes — 3-col grids, prose alignment, calculator totals, VPS max values

Browse Source
This commit is contained in:
Jeffrey 2026-02-24 13:04:07 +01:00
parent 313cfd31fb
commit db9d5d4ebb
7 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/blocks/FDFaqBlock/Component.tsx
View File

@ -87,8 +87,8 @@ export const FDFaqBlockComponent: React.FC<FDFaqBlockProps> = ({
}`} }`}
> >
<div className="overflow-hidden"> <div className="overflow-hidden">
<div className={`font-joey text-fd-body fd-prose ${proseColor}`}> <div className={`pl-7 md:pl-9 font-joey text-fd-body fd-prose ${proseColor}`}>
<RichText data={(item.answer) as any} /> <RichText data={(item.answer) as any} enableGutter={false} enableProse={false} />
</div> </div>
</div> </div>
</div> </div>

2
src/blocks/FDLocationsGridBlock/Component.tsx
View File

@ -56,7 +56,7 @@ export const FDLocationsGridBlockComponent: React.FC<Props> = ({
</div> </div>
)} )}
<div className="grid grid-cols-1 sm:grid-cols-2 min-[820px]:grid-cols-3 gap-4 md:gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
{(cards ?? []).map((card, i) => { {(cards ?? []).map((card, i) => {
const media = card.image as Media | undefined const media = card.image as Media | undefined
const isLink = Boolean(card.link) const isLink = Boolean(card.link)

2
src/blocks/FDServiceCalculatorBlock/Component.tsx
View File

@ -347,7 +347,7 @@ export const FDServiceCalculatorBlockComponent: React.FC<Props> = ({
<div className={`mt-6 pt-5 border-t-2 ${dividerClass}`}> <div className={`mt-6 pt-5 border-t-2 ${dividerClass}`}>
<div className="flex justify-between items-baseline"> <div className="flex justify-between items-baseline">
<span className={`font-joey text-fd-body-lg ${summaryLabel}`}>{totalLabel}</span> <span className={`font-joey text-fd-body-lg ${summaryLabel}`}>{totalLabel}</span>
<span className={`font-joey-heavy text-fd-h1 ${headingColor}`}>{formatKr(costs.total)}</span> <span className={`font-joey-heavy text-fd-h2 min-[820px]:text-fd-h2 lg:text-fd-h1 ${headingColor}`}>{formatKr(costs.total)}</span>
</div> </div>
{totalSuffix && ( {totalSuffix && (
<p className={`text-right font-joey text-fd-body-lg mt-1 ${categoryLabel}`}>{totalSuffix}</p> <p className={`text-right font-joey text-fd-body-lg mt-1 ${categoryLabel}`}>{totalSuffix}</p>

2
src/blocks/FDServiceChooserBlock/Component.tsx
View File

@ -100,7 +100,7 @@ export const FDServiceChooserBlockComponent: React.FC<Props> = ({
</p> </p>
)} )}
<div className="grid grid-cols-1 sm:grid-cols-2 min-[820px]:grid-cols-3 gap-4 md:gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
{activeCategory?.services?.map((service, i) => ( {activeCategory?.services?.map((service, i) => (
<div <div
key={i} key={i}

4
src/blocks/FDTeamBlock/Component.tsx
View File

@ -34,8 +34,8 @@ const cardMap: Record<string, { bg: string; name: string; role: string; bio: str
const colsMap: Record<string, string> = { const colsMap: Record<string, string> = {
'2': 'sm:grid-cols-2', '2': 'sm:grid-cols-2',
'3': 'sm:grid-cols-2 min-[820px]:grid-cols-3', '3': 'md:grid-cols-3',
'4': 'sm:grid-cols-2 min-[820px]:grid-cols-4', '4': 'md:grid-cols-4',
} }
/* Priority #5: Responsive radius for team member cards */ /* Priority #5: Responsive radius for team member cards */

2
src/blocks/FDTestimonialBlock/Component.tsx
View File

@ -121,7 +121,7 @@ export const FDTestimonialBlockComponent: React.FC<FDTestimonialBlockProps> = ({
)} )}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 min-[820px]:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{testimonials?.map((t, i) => { {testimonials?.map((t, i) => {
const avatar = t.avatar as Media | undefined const avatar = t.avatar as Media | undefined
return ( return (

6
src/blocks/FDVpsCalculatorBlock/Component.tsx
View File

@ -191,8 +191,8 @@ export const FDVpsCalculatorBlockComponent: React.FC<FDVpsCalculatorBlockProps>
</div> </div>
<div> <div>
<ResourceRow label="CPU-kärnor" value={cpuCores} onChange={setCpuCores} min={1} max={32} unit="st" priceLabel={`${pricing.cpuPerCore} kr/kärna${discStr}`} isDark={isDark} /> <ResourceRow label="CPU-kärnor" value={cpuCores} onChange={setCpuCores} min={1} max={96} unit="st" priceLabel={`${pricing.cpuPerCore} kr/kärna${discStr}`} isDark={isDark} />
<ResourceRow label="RAM" value={ramGb} onChange={setRamGb} min={1} max={256} unit="GB" priceLabel={`${pricing.ramPerGb} kr/GB${discStr}`} isDark={isDark} /> <ResourceRow label="RAM" value={ramGb} onChange={setRamGb} min={1} max={480} unit="GB" priceLabel={`${pricing.ramPerGb} kr/GB${discStr}`} isDark={isDark} />
<ResourceRow label="SSD NVMe" value={ssdGb} onChange={setSsdGb} min={0} max={4000} step={10} unit="GB" priceLabel={`${pricing.ssdPerGb} kr/GB${discStr}`} isDark={isDark} /> <ResourceRow label="SSD NVMe" value={ssdGb} onChange={setSsdGb} min={0} max={4000} step={10} unit="GB" priceLabel={`${pricing.ssdPerGb} kr/GB${discStr}`} isDark={isDark} />
<ResourceRow label="HDD" value={hddGb} onChange={setHddGb} min={0} max={10000} step={100} unit="GB" priceLabel={`${pricing.hddPerGb} kr/GB${discStr}`} isDark={isDark} /> <ResourceRow label="HDD" value={hddGb} onChange={setHddGb} min={0} max={10000} step={100} unit="GB" priceLabel={`${pricing.hddPerGb} kr/GB${discStr}`} isDark={isDark} />
</div> </div>
@ -254,7 +254,7 @@ export const FDVpsCalculatorBlockComponent: React.FC<FDVpsCalculatorBlockProps>
<div className={`mt-6 pt-5 border-t-2 ${dividerClass}`}> <div className={`mt-6 pt-5 border-t-2 ${dividerClass}`}>
<div className="flex justify-between items-baseline"> <div className="flex justify-between items-baseline">
<span className={`font-joey text-fd-body-lg ${summaryLabel}`}>Totalt per månad</span> <span className={`font-joey text-fd-body-lg ${summaryLabel}`}>Totalt per månad</span>
<span className={`font-joey-heavy text-fd-h1 ${headingColor}`}>{formatKr(costs.total)}</span> <span className={`font-joey-heavy text-fd-h2 min-[820px]:text-fd-h2 lg:text-fd-h1 ${headingColor}`}>{formatKr(costs.total)}</span>
</div> </div>
<p className={`text-right font-joey text-fd-body-lg mt-1 ${categoryLabel}`}>exkl. moms</p> <p className={`text-right font-joey text-fd-body-lg mt-1 ${categoryLabel}`}>exkl. moms</p>
</div> </div>