From 5bd49eaed8e8df8e3d4a3f0d3798bb0c536b3365 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 3 Nov 2026 16:05:06 -0700
Subject: [PATCH] Keep the three logo-wall marks in a centered cluster instead
 of stretching them across the page.

The space-between row was drawn for six logos; three marks looked abandoned at the edges.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/components/sections/LogoWall/LogoWall.view.tsx | 4 ++--
 stories/sections/LogoWall.stories.js               | 6 +++---
 tests/unit/LogoWall.test.jsx                       | 7 +++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/components/sections/LogoWall/LogoWall.view.tsx b/app/components/sections/LogoWall/LogoWall.view.tsx
index 2fee9a9..c10ba10 100644
--- a/app/components/sections/LogoWall/LogoWall.view.tsx
+++ b/app/components/sections/LogoWall/LogoWall.view.tsx
@@ -11,11 +11,11 @@ function LogoWallView({ displayLogos, className }: LogoWallViewProps) {
       data-figma-node="18483-18425"
     >
       <div className="w-full opacity-60">
-        <div className="flex w-full flex-col items-center gap-[38.4px] sm:flex-row sm:flex-wrap sm:justify-around md:flex-nowrap md:justify-between lg:gap-[var(--space-1200)]">
+        <div className="flex w-full flex-col items-center justify-center gap-[38.4px] sm:flex-row sm:flex-wrap sm:justify-center md:flex-nowrap lg:gap-[var(--space-1200)]">
           {displayLogos.map((logo, index) => (
             <div
               key={logo.alt || index}
-              className="flex items-center justify-center md:shrink-0"
+              className="flex shrink-0 items-center justify-center"
             >
               <Image
                 src={logo.src}
diff --git a/stories/sections/LogoWall.stories.js b/stories/sections/LogoWall.stories.js
index f8de374..85416f0 100644
--- a/stories/sections/LogoWall.stories.js
+++ b/stories/sections/LogoWall.stories.js
@@ -11,9 +11,9 @@ export default {
 
 ## Responsive Behavior
 
-- **Mobile**: stacked column
-- **SM+**: wrapping row
-- **MD+**: single space-between row
+- **Mobile**: stacked, centered
+- **SM+**: centered wrapping cluster
+- **MD+**: single centered row with a fixed gap
 
 ## Props
 
diff --git a/tests/unit/LogoWall.test.jsx b/tests/unit/LogoWall.test.jsx
index c485e7b..2487d77 100644
--- a/tests/unit/LogoWall.test.jsx
+++ b/tests/unit/LogoWall.test.jsx
@@ -60,17 +60,20 @@ describe("LogoWall Component", () => {
     );
   });
 
-  test("lays out the three marks in a wrapping row", () => {
+  test("lays out the three marks as a centered cluster", () => {
     render(<LogoWall />);
 
     const row = document.querySelector('[class*="flex w-full flex-col"]');
     expect(row).toBeInTheDocument();
     expect(row).toHaveClass(
+      "justify-center",
       "sm:flex-row",
+      "sm:justify-center",
       "md:flex-nowrap",
-      "md:justify-between",
       "gap-[38.4px]",
     );
+    expect(row).not.toHaveClass("md:justify-between");
+    expect(row).not.toHaveClass("sm:justify-around");
   });
 
   test("renders logos with correct attributes", () => {