From 2b21ad456bfaf4960bf86b1abcfb0a070b089680 Mon Sep 17 00:00:00 2001
From: Alex Kwiatkowski <alex+git@fremantle.io>
Date: Sat, 27 Dec 2025 17:29:34 -0800
Subject: [PATCH] fix: improve vibes page mobile layout

- Use smaller font (text-xs) for curl command on mobile to prevent wrapping
- Use smaller buttons (md sizing) on mobile for better proportions
- Both changes scale up to original sizes on sm breakpoint
---
 src/components/products/CodeBlock/CodeBlock.tsx | 2 +-
 src/routes/products/vibes.tsx                   | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/products/CodeBlock/CodeBlock.tsx b/src/components/products/CodeBlock/CodeBlock.tsx
index 8071698..69d5dc7 100644
--- a/src/components/products/CodeBlock/CodeBlock.tsx
+++ b/src/components/products/CodeBlock/CodeBlock.tsx
@@ -23,7 +23,7 @@ export function CodeBlock({ code, className }: CodeBlockProps) {
   return (
     <div
       className={cn(
-        'relative flex items-center gap-3 rounded-lg bg-muted/50 border border-border px-4 py-3 font-mono text-sm',
+        'relative flex items-center gap-3 rounded-lg bg-muted/50 border border-border px-4 py-3 font-mono text-xs sm:text-sm',
         className,
       )}
     >
diff --git a/src/routes/products/vibes.tsx b/src/routes/products/vibes.tsx
index 9e7572d..71cd40c 100644
--- a/src/routes/products/vibes.tsx
+++ b/src/routes/products/vibes.tsx
@@ -53,7 +53,7 @@ function VibesPage() {
           </div>
 
           <div className="flex items-center justify-center gap-4">
-            <Button asChild size="lg">
+            <Button asChild size="lg" className="h-10 px-5 text-sm sm:h-12 sm:px-7 sm:text-base">
               <a
                 href="https://github.com/run-vibes/vibes"
                 target="_blank"
@@ -62,7 +62,12 @@ function VibesPage() {
                 Star on GitHub
               </a>
             </Button>
-            <Button variant="outline" asChild size="lg">
+            <Button
+              variant="outline"
+              asChild
+              size="lg"
+              className="h-10 px-5 text-sm sm:h-12 sm:px-7 sm:text-base"
+            >
               <a
                 href="https://github.com/run-vibes/vibes#readme"
                 target="_blank"