From 307b3a8a14a034e4958df3b58df7e36dff115a5e Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 30 Sep 2025 23:06:04 +0200
Subject: [PATCH] fix: adjust button layout in ButtonsSection for better
 spacing - Updated button container in `ButtonsSection` to use `space-x-4` for
 horizontal spacing between buttons, improving visual alignment and usability
 across variants, sizes, and states.

---
 src/components/ui-showcase/sections/ButtonsSection.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui-showcase/sections/ButtonsSection.tsx b/src/components/ui-showcase/sections/ButtonsSection.tsx
index 5f9d9da..efa681b 100644
--- a/src/components/ui-showcase/sections/ButtonsSection.tsx
+++ b/src/components/ui-showcase/sections/ButtonsSection.tsx
@@ -12,7 +12,7 @@ export function ButtonsSection() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         <div className="space-y-6">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Variants</h3>
-          <div className="space-y-4">
+          <div className="space-y-4 space-x-4">
             <Button variant="primary">Primary Button</Button>
             <Button variant="secondary">Secondary Button</Button>
             <Button variant="ghost">Ghost Button</Button>
@@ -24,7 +24,7 @@ export function ButtonsSection() {
 
         <div className="space-y-6">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Sizes</h3>
-          <div className="space-y-4">
+          <div className="space-y-4 space-x-4">
             <Button size="sm">Small Button</Button>
             <Button size="md">Medium Button</Button>
             <Button size="lg">Large Button</Button>
@@ -33,7 +33,7 @@ export function ButtonsSection() {
 
         <div className="space-y-6">
           <h3 className="text-lg font-medium text-[var(--foreground)]">States</h3>
-          <div className="space-y-4">
+          <div className="space-y-4 space-x-4">
             <Button>Normal State</Button>
             <Button disabled>Disabled State</Button>
             <Button className="opacity-50">Loading State</Button>