fix(web): arrange partner logos in a grid, max 3 per row
CI Pipeline with Test Management / 🧪 Run Tests & Generate Reports (push) Canceled after 0s
Test Reporting & Gherkin Analysis / 🧪 Run Tests & Generate Reports (push) Canceled after 0s
CI Pipeline with Test Management / 🐳 Docker Integration Tests (push) Canceled after 0s
CI Pipeline with Test Management / 🏗️ Build Docker Image (push) Canceled after 0s
CI Pipeline with Test Management / 📊 Generate Test Summary (push) Canceled after 0s
Test Reporting & Gherkin Analysis / 📊 Analyze Test Coverage (push) Canceled after 0s
Test Reporting & Gherkin Analysis / 🔄 Sync with Linear (push) Canceled after 0s
Test Reporting & Gherkin Analysis / ⚡ Performance Monitoring (push) Canceled after 0s

User request: the partner logos were laid out with flex-wrap, which
doesn't align items into clean rows/columns. Switched to CSS grid
(grid-cols-1 sm:grid-cols-2 md:grid-cols-3), so it never exceeds 3
columns regardless of viewport width or partner count.

w-fit + mx-auto (not inline-grid + mx-auto) so the grid centers
correctly even with fewer partners than 3 — auto margins don't center
inline-level boxes, but do for block-level ones sized to their content.

Verified live in the browser at 1200px width with 5 temporary test
partners (reusing an existing Media doc, deleted after): renders as a
3-then-2 grid, centered, no console errors.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Do Siki
2026-09-12 16:38:05 +02:00
co-authored by Claude Sonnet 5
parent e2b0c62628
commit 1bf32dd076
+7 -1
View File
@@ -237,7 +237,13 @@ export default function HomeView({ content: pageContent, partners, locale }: Hom
<p className="text-center mb-10" style={{ color: 'var(--color-foreground-muted)' }}>
{partnersCopy.subtitle}
</p>
<div className="flex flex-wrap justify-center items-center gap-10">
{/* WHY grid + w-fit + mx-auto: a felhasználó kérésére valódi
mátrix (max 3 oszlop), nem folyó flex-wrap. `w-fit` zsugorítja
a rácsot a tényleges (legfeljebb 3 oszlopnyi) tartalom
szélességére, a `mx-auto` pedig ettől tudja középre venni —
sima `inline-grid`-en az auto margó nem középre igazítana,
mert az egy inline-szintű doboz. */}
<div className="grid w-fit grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 justify-items-center mx-auto">
{partners.map((partner) => (
<a
key={partner.name}