From 71f072ee4418e13362cf5d95c40d127313b10ca2 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 28 May 2026 12:17:46 +0200
Subject: [PATCH] fix: `ImageGrid` shows scrollbars (#46451)

## Problem

<img width="720" height="796" alt="image"
src="https://github.com/user-attachments/assets/830530e2-d0a0-49cd-a036-85fce7ec9bc3"
/>

## Solution

<img width="706" height="808" alt="image"
src="https://github.com/user-attachments/assets/1170eb0f-89a5-4642-98e9-7e9349312bc0"
/>

## How to test

- Fixed:
https://zone-www-dot-86t6fdcat-supabase.vercel.app/blog/supabase-series-a
- Fixed:
https://zone-www-dot-86t6fdcat-supabase.vercel.app/blog/supabase-enterprise
- Should work as before:
https://zone-www-dot-86t6fdcat-supabase.vercel.app/company
- Should work as before:
https://zone-www-dot-86t6fdcat-supabase.vercel.app/ga

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated styling classes in the image grid component for improved
consistency and layout alignment.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46451?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/www/components/ImageGrid.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/components/ImageGrid.tsx b/apps/www/components/ImageGrid.tsx
index 2a595d5b184..73fd6e500a9 100644
--- a/apps/www/components/ImageGrid.tsx
+++ b/apps/www/components/ImageGrid.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { motion } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
 import { cn } from 'ui'
 
 interface iImages {
@@ -73,7 +73,7 @@ const ImageGrid = ({
 
   return (
     <div
-      className={`grid 
+      className={`grid
       gap-0.5 rounded-lg overflow-hidden
       items-center
     	${smBreakpoint[smCols]}
@@ -116,7 +116,7 @@ const ImageGrid = ({
               className={cn(
                 bg && 'bg-surface-200',
                 'w-full',
-                `col-span-1 flex items-center justify-center 
+                `col-span-1 flex items-center justify-center
                   ${x.link && 'hover:bg-overlay-hover'}
                   p-8 ${className}`
               )}
@@ -128,7 +128,7 @@ const ImageGrid = ({
                   fill
                   sizes="100%"
                   className={cn(
-                    'object-scale-down object-center bg-no-repeat',
+                    'object-scale-down object-center bg-no-repeat m-0',
                     !removeFilter && 'contrast-0 filter opacity-50'
                   )}
                 />