From e4f00ae2f1780ee102ff9da8ec4078f94cd57fcb Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Fri, 17 Oct 2025 19:09:02 +0100
Subject: [PATCH] fix: optimize homepage button layout for mobile and desktop

- Fix mobile button overflow by adding min-w-0 to flex items
- Change middle buttons from full-width flex-1 to md:w-auto to prevent overlapping logo
- Add flex-wrap to buttons container for better layout control
- Add flex-shrink-0 to logo to maintain its space
- Increase button size to lg for better prominence
- Layout now shows: first button full width, second & third side-by-side, fourth full width on mobile
- Buttons properly scale and position on all screen sizes
---
 crowdsec-docs/src/pages/index.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/crowdsec-docs/src/pages/index.tsx b/crowdsec-docs/src/pages/index.tsx
index 4798d40f1..d24f7b3db 100644
--- a/crowdsec-docs/src/pages/index.tsx
+++ b/crowdsec-docs/src/pages/index.tsx
@@ -19,31 +19,31 @@ const HomePageHeader = (): React.JSX.Element => {
 								infrastructure and application security.
 							</p>
 						</div>
-						<img alt="CrowdSec Logo" src="/img/crowdsec_logo.png" className="h-20 w-28 md:h-24 md:w-auto" />
+						<img alt="CrowdSec Logo" src="/img/crowdsec_logo.png" className="h-20 w-28 md:h-24 md:w-auto flex-shrink-0" />
 					</div>
-					<div className="flex flex-col md:flex-row items-start gap-2">
+					<div className="flex flex-col md:flex-row items-start gap-2 flex-wrap">
 						<Link to="/u/getting_started/intro" className="w-full md:w-auto">
-							<Button color="primary" className="w-full md:w-auto">
+							<Button size="lg" color="primary" className="w-full md:w-auto">
 								🚀 Quick Guides
 							</Button>
 						</Link>
 						<div className="flex flex-row gap-2 w-full md:w-auto">
-							<Link to="https://app.crowdsec.net/" className="flex-1 md:flex-none">
-								<Button variant="secondary" className="w-full md:w-auto">
+							<Link to="https://app.crowdsec.net/" className="flex-1 min-w-0">
+								<Button size="lg" variant="secondary" className="w-full">
 									👨‍💻 Explore the Console
 								</Button>
 							</Link>
-							<Link to="https://killercoda.com/iiamloz/scenario/crowdsec-setup" className="flex-1 md:flex-none">
-								<Button variant="secondary" className="w-full md:w-auto">
+							<Link to="https://killercoda.com/iiamloz/scenario/crowdsec-setup" className="flex-1 min-w-0">
+								<Button size="lg" variant="secondary" className="w-full">
 									🛠️ Online Sandbox
 								</Button>
 							</Link>
-							<Link to="https://start.crowdsec.net/" className="flex-1 md:flex-none">
-								<Button variant="secondary" className="w-full md:w-auto">
-									💡 Not sure where to start?
-								</Button>
-							</Link>
 						</div>
+						<Link to="https://start.crowdsec.net/" className="w-full md:w-auto">
+							<Button size="lg" variant="secondary" className="w-full md:w-auto">
+								💡 Not sure where to start?
+							</Button>
+						</Link>
 					</div>
 				</div>