From ca1ba375abda578ef728fcb8037e644131997d72 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 17 May 2026 06:14:41 +0000
Subject: [PATCH 1/2] fix(landing): resolve mobile responsiveness issues

- Constrain hero glow overlay to viewport width (was fixed 600px,
  causing horizontal scroll on phones).
- Stack hero and final-CTA buttons vertically below sm breakpoint
  so they don't overflow on narrow screens.
- Scale HeroGraph height responsively (320/420/540px) so the demo
  canvas isn't disproportionately tall on mobile.
- Add overflow-x: clip on body as a safety net (clip, not hidden,
  to preserve the sticky navbar).
---
 app/globals.css                  |  1 +
 app/page.tsx                     | 20 +++++++++++---------
 components/landing/HeroGraph.tsx |  4 ++--
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 59d5dfe..ffa787e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -57,6 +57,7 @@ body {
     color: var(--text-primary);
     font-family: var(--font-sora), sans-serif;
     min-height: 100vh;
+    overflow-x: clip;
 }
 
 /* Custom scrollbar */
diff --git a/app/page.tsx b/app/page.tsx
index 4e5f899..43d569d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -115,7 +115,7 @@ export default async function LandingPage() {
                 {/* ─── Node: Hero (Initial) ─── */}
                 <FlowNode label="initial_marking" isInitial className="pt-20 pb-8">
                     <div
-                        className="absolute top-0 left-1/2 -translate-x-1/2 w-150 h-100 pointer-events-none"
+                        className="absolute top-0 left-1/2 -translate-x-1/2 w-[min(600px,100vw)] h-100 pointer-events-none"
                         style={{
                             background:
                                 "radial-gradient(ellipse at center, rgba(124,111,247,0.12) 0%, transparent 70%)",
@@ -146,9 +146,9 @@ export default async function LandingPage() {
                             production-ready YAML.
                         </p>
 
-                        <div className="flex items-center gap-3 mt-2">
-                            <Link href="/editor">
-                                <Button size="lg" className="gap-2 text-sm">
+                        <div className="flex flex-col sm:flex-row sm:items-center justify-center gap-3 mt-2 w-full sm:w-auto">
+                            <Link href="/editor" className="w-full sm:w-auto">
+                                <Button size="lg" className="gap-2 text-sm w-full sm:w-auto">
                                     Start Building
                                     <ArrowRight className="w-4 h-4" />
                                 </Button>
@@ -157,11 +157,12 @@ export default async function LandingPage() {
                                 href="https://github.com/vandetho/symflowbuilder"
                                 target="_blank"
                                 rel="noopener noreferrer"
+                                className="w-full sm:w-auto"
                             >
                                 <Button
                                     variant="outline"
                                     size="lg"
-                                    className="gap-2 text-sm"
+                                    className="gap-2 text-sm w-full sm:w-auto"
                                 >
                                     <GitHubIcon className="w-4 h-4" />
                                     Star on GitHub
@@ -468,9 +469,9 @@ export default async function LandingPage() {
                                     Sign in to unlock cloud save, versioning, and
                                     shareable links.
                                 </p>
-                                <div className="flex items-center gap-3 mt-2">
-                                    <Link href="/editor">
-                                        <Button size="lg" className="gap-2">
+                                <div className="flex flex-col sm:flex-row sm:items-center justify-center gap-3 mt-2 w-full sm:w-auto">
+                                    <Link href="/editor" className="w-full sm:w-auto">
+                                        <Button size="lg" className="gap-2 w-full sm:w-auto">
                                             Start Building
                                             <ArrowRight className="w-4 h-4" />
                                         </Button>
@@ -479,11 +480,12 @@ export default async function LandingPage() {
                                         href="https://github.com/vandetho/symflowbuilder"
                                         target="_blank"
                                         rel="noopener noreferrer"
+                                        className="w-full sm:w-auto"
                                     >
                                         <Button
                                             variant="outline"
                                             size="lg"
-                                            className="gap-2"
+                                            className="gap-2 w-full sm:w-auto"
                                         >
                                             <GitHubIcon className="w-4 h-4" />
                                             View Source
diff --git a/components/landing/HeroGraph.tsx b/components/landing/HeroGraph.tsx
index b145b99..9b55e0a 100644
--- a/components/landing/HeroGraph.tsx
+++ b/components/landing/HeroGraph.tsx
@@ -177,11 +177,11 @@ export function HeroGraph() {
     const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
     if (!mounted) {
-        return <div className="w-full h-[540px] rounded-[18px] glass animate-pulse" />;
+        return <div className="w-full h-[320px] sm:h-[420px] lg:h-[540px] rounded-[18px] glass animate-pulse" />;
     }
 
     return (
-        <div className="w-full h-[540px] rounded-[18px] glass overflow-hidden shadow-[0_16px_64px_rgba(124,111,247,0.08)]">
+        <div className="w-full h-[320px] sm:h-[420px] lg:h-[540px] rounded-[18px] glass overflow-hidden shadow-[0_16px_64px_rgba(124,111,247,0.08)]">
             <ReactFlowProvider>
                 <ReactFlow
                     nodes={DEMO_NODES}

From f7e6b951ff5e5e17cab7533b16ab9e8223e219e5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 17 May 2026 06:21:13 +0000
Subject: [PATCH 2/2] style: apply prettier formatting to landing page changes

---
 app/page.tsx                     | 10 ++++++++--
 components/landing/HeroGraph.tsx |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 43d569d..46090fc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -148,7 +148,10 @@ export default async function LandingPage() {
 
                         <div className="flex flex-col sm:flex-row sm:items-center justify-center gap-3 mt-2 w-full sm:w-auto">
                             <Link href="/editor" className="w-full sm:w-auto">
-                                <Button size="lg" className="gap-2 text-sm w-full sm:w-auto">
+                                <Button
+                                    size="lg"
+                                    className="gap-2 text-sm w-full sm:w-auto"
+                                >
                                     Start Building
                                     <ArrowRight className="w-4 h-4" />
                                 </Button>
@@ -471,7 +474,10 @@ export default async function LandingPage() {
                                 </p>
                                 <div className="flex flex-col sm:flex-row sm:items-center justify-center gap-3 mt-2 w-full sm:w-auto">
                                     <Link href="/editor" className="w-full sm:w-auto">
-                                        <Button size="lg" className="gap-2 w-full sm:w-auto">
+                                        <Button
+                                            size="lg"
+                                            className="gap-2 w-full sm:w-auto"
+                                        >
                                             Start Building
                                             <ArrowRight className="w-4 h-4" />
                                         </Button>
diff --git a/components/landing/HeroGraph.tsx b/components/landing/HeroGraph.tsx
index 9b55e0a..8325612 100644
--- a/components/landing/HeroGraph.tsx
+++ b/components/landing/HeroGraph.tsx
@@ -177,7 +177,9 @@ export function HeroGraph() {
     const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
     if (!mounted) {
-        return <div className="w-full h-[320px] sm:h-[420px] lg:h-[540px] rounded-[18px] glass animate-pulse" />;
+        return (
+            <div className="w-full h-[320px] sm:h-[420px] lg:h-[540px] rounded-[18px] glass animate-pulse" />
+        );
     }
 
     return (