From 7469d8b791e1202e8d34a18ba2d9a81e46d015ad Mon Sep 17 00:00:00 2001
From: AgenticDiego <noreply@carvallo.io>
Date: Thu, 3 Sep 2026 10:16:01 +0000
Subject: [PATCH] fix(guest-list): remove duplicate padding from
 GuestListSkeleton

GuestListSkeleton was adding `px-4 py-5 lg:px-6 lg:py-6` to its outer
container, but the skeleton is always rendered as a Suspense fallback
inside `<main className='...px-4 py-5 lg:px-6 lg:py-6'>` in the guest
list page. This doubled the horizontal and vertical padding, making the
loading skeleton appear significantly more indented than the actual
guest list content that replaces it, causing a visible layout shift on
load.

Removing the redundant padding from the skeleton aligns it with the
padding applied by the parent <main> element, matching the position of
the real content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaXfTGQoWpy1UaLLVVG1iZ
---
 src/components/guest-list/guest-list-skeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/guest-list/guest-list-skeleton.tsx b/src/components/guest-list/guest-list-skeleton.tsx
index 5be0e7f5..c247275e 100644
--- a/src/components/guest-list/guest-list-skeleton.tsx
+++ b/src/components/guest-list/guest-list-skeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '~/components/ui/skeleton'
 
 export function GuestListSkeleton() {
   return (
-    <div className='flex flex-col gap-4 px-4 py-5 lg:px-6 lg:py-6' aria-busy='true'>
+    <div className='flex flex-col gap-4' aria-busy='true'>
       {/* Event filter tabs */}
       <div className='flex items-center gap-5 border-border border-b pb-px'>
         <Skeleton className='mb-3 h-5 w-20' />