From 6bdbdef5958e1fc7a1e0efd4d1c452eef4930f64 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Tue, 4 Aug 2026 21:47:50 +0900
Subject: [PATCH 1/6] fix(routes/index): scale down the adapter graph on small
 screens

---
 src/routes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 07a94ef1b..b5a3f4aca 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -606,7 +606,7 @@ function FrameworkAdapterGraph({
     // fill the 460×233 slot rather than re-deriving every coordinate.
     <div
       aria-hidden="true"
-      className="relative h-32 w-[320px] shrink-0 scale-[1.35] font-mono text-[10px] font-bold"
+      className="relative h-32 w-[320px] shrink-0 scale-90 font-mono text-[10px] font-bold min-[520px]:scale-[1.2] sm:scale-[1.35]"
     >
       <div className="home-adapter-graph absolute inset-x-0 top-1 h-[7.5rem] overflow-visible">
         {frameworkAdapterNodes.map((adapter, adapterIndex) => {

From 62e31cb89bafbfebeaba2e54fffc5481202e1b99 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 5 Aug 2026 09:49:57 +0900
Subject: [PATCH 2/6] refactor(routes/index): scale the adapter graph
 continuously with a container query

---
 src/routes/index.tsx | 186 ++++++++++++++++++++++---------------------
 1 file changed, 96 insertions(+), 90 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index acf31a25f..cba94b041 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -607,104 +607,110 @@ function FrameworkAdapterGraph({
 
   return (
     // The node positions below are hard-coded against a 320×128 grid
-    // (adapterGraphWidth/Height), so the whole graph is scaled as a unit to
-    // fill the 460×233 slot rather than re-deriving every coordinate.
-    <div
-      ref={rootRef}
-      aria-hidden="true"
-      className="relative h-32 w-[320px] shrink-0 scale-90 font-mono text-[10px] font-bold min-[520px]:scale-[1.2] sm:scale-[1.35]"
-    >
-      <div className="home-adapter-graph absolute inset-x-0 top-1 h-[7.5rem] overflow-visible">
-        {frameworkAdapterNodes.map((adapter, adapterIndex) => {
-          const isActive = activeAdapterIndex === adapterIndex
-
-          return (
-            <span
-              key={adapter.label}
-              data-adapter-label={adapter.label}
-              style={adapterGraphStyle(adapter)}
-              className={twMerge(
-                'absolute z-20 flex items-center justify-center rounded-md border px-2 text-center text-gray-600 shadow-sm backdrop-blur transition-colors duration-500 dark:text-gray-400',
-                isActive
-                  ? 'border-cyan-300 bg-cyan-50 text-cyan-800 shadow-cyan-500/15 dark:border-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-200'
-                  : 'border-gray-200 bg-white/85 dark:border-gray-800 dark:bg-black/55',
-              )}
-            >
-              {adapter.label}
-            </span>
-          )
-        })}
-
-        <span
-          data-adapter-label={frameworkAdapterCore.label}
-          style={adapterGraphStyle(frameworkAdapterCore)}
-          className={twMerge(
-            'absolute z-30 flex items-center justify-center rounded-lg bg-gradient-to-r text-center text-[11px] text-white shadow-lg shadow-cyan-500/15',
-            accentClassName,
-          )}
-        >
-          core
-        </span>
-
-        {frameworkAdapterConnections.map((connection, connectionIndex) => {
-          const progress = (flowProgress - connectionIndex * 0.13 + 1) % 1
-          const point = cubicPoint(
-            connection.start,
-            connection.control1,
-            connection.control2,
-            connection.end,
-            progress,
-          )
-          const angle = cubicAngle(
-            connection.start,
-            connection.control1,
-            connection.control2,
-            connection.end,
-            progress,
-          )
-
-          return (
-            <span
-              key={`flow-${connection.label}`}
-              data-connection-flow={connection.label}
-              style={{
-                ...adapterGraphPointStyle(point),
-                transform: `translate(-50%, -50%) rotate(${angle}deg)`,
-              }}
-              className={twMerge(
-                'home-adapter-graph-flow absolute z-50',
-                progress < 0.08 || progress > 0.92
-                  ? 'opacity-0'
-                  : 'opacity-100',
-              )}
-            />
-          )
-        })}
-
-        {frameworkAdapterConnections.map((connection, connectionIndex) => {
-          const isActive = activeAdapterIndex === connectionIndex
+    // (adapterGraphWidth/Height), so the whole graph is scaled as a unit rather
+    // than re-deriving every coordinate. The scale tracks the container's own
+    // width so it fills whatever slot it lands in, capped at 1.35 — the ratio
+    // the 460px `lg` slot was designed around.
+    <div ref={rootRef} className="@container flex w-full justify-center">
+      <div
+        aria-hidden="true"
+        style={{
+          transform: 'scale(clamp(0.8, calc(100cqw / 320px), 1.35))',
+        }}
+        className="relative h-32 w-[320px] shrink-0 origin-center font-mono text-[10px] font-bold"
+      >
+        <div className="home-adapter-graph absolute inset-x-0 top-1 h-[7.5rem] overflow-visible">
+          {frameworkAdapterNodes.map((adapter, adapterIndex) => {
+            const isActive = activeAdapterIndex === adapterIndex
 
-          return (
-            <React.Fragment key={`ports-${connection.label}`}>
+            return (
               <span
-                data-connection-port={`${connection.label}-core`}
-                style={adapterGraphPointStyle(connection.start)}
+                key={adapter.label}
+                data-adapter-label={adapter.label}
+                style={adapterGraphStyle(adapter)}
                 className={twMerge(
-                  'absolute z-40 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-200 bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.55)] transition-opacity duration-500 dark:border-cyan-900',
-                  isActive ? 'opacity-100' : 'opacity-55',
+                  'absolute z-20 flex items-center justify-center rounded-md border px-2 text-center text-gray-600 shadow-sm backdrop-blur transition-colors duration-500 dark:text-gray-400',
+                  isActive
+                    ? 'border-cyan-300 bg-cyan-50 text-cyan-800 shadow-cyan-500/15 dark:border-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-200'
+                    : 'border-gray-200 bg-white/85 dark:border-gray-800 dark:bg-black/55',
                 )}
-              />
+              >
+                {adapter.label}
+              </span>
+            )
+          })}
+
+          <span
+            data-adapter-label={frameworkAdapterCore.label}
+            style={adapterGraphStyle(frameworkAdapterCore)}
+            className={twMerge(
+              'absolute z-30 flex items-center justify-center rounded-lg bg-gradient-to-r text-center text-[11px] text-white shadow-lg shadow-cyan-500/15',
+              accentClassName,
+            )}
+          >
+            core
+          </span>
+
+          {frameworkAdapterConnections.map((connection, connectionIndex) => {
+            const progress = (flowProgress - connectionIndex * 0.13 + 1) % 1
+            const point = cubicPoint(
+              connection.start,
+              connection.control1,
+              connection.control2,
+              connection.end,
+              progress,
+            )
+            const angle = cubicAngle(
+              connection.start,
+              connection.control1,
+              connection.control2,
+              connection.end,
+              progress,
+            )
+
+            return (
               <span
-                data-connection-port={`${connection.label}-adapter`}
-                style={adapterGraphPointStyle(connection.end)}
+                key={`flow-${connection.label}`}
+                data-connection-flow={connection.label}
+                style={{
+                  ...adapterGraphPointStyle(point),
+                  transform: `translate(-50%, -50%) rotate(${angle}deg)`,
+                }}
                 className={twMerge(
-                  'absolute z-40 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-200 bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.55)] transition-opacity duration-500 dark:border-cyan-900',
-                  isActive ? 'opacity-100' : 'opacity-55',
+                  'home-adapter-graph-flow absolute z-50',
+                  progress < 0.08 || progress > 0.92
+                    ? 'opacity-0'
+                    : 'opacity-100',
                 )}
               />
-            </React.Fragment>
-          )
-        })}
+            )
+          })}
+
+          {frameworkAdapterConnections.map((connection, connectionIndex) => {
+            const isActive = activeAdapterIndex === connectionIndex
+
+            return (
+              <React.Fragment key={`ports-${connection.label}`}>
+                <span
+                  data-connection-port={`${connection.label}-core`}
+                  style={adapterGraphPointStyle(connection.start)}
+                  className={twMerge(
+                    'absolute z-40 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-200 bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.55)] transition-opacity duration-500 dark:border-cyan-900',
+                    isActive ? 'opacity-100' : 'opacity-55',
+                  )}
+                />
+                <span
+                  data-connection-port={`${connection.label}-adapter`}
+                  style={adapterGraphPointStyle(connection.end)}
+                  className={twMerge(
+                    'absolute z-40 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-200 bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.55)] transition-opacity duration-500 dark:border-cyan-900',
+                    isActive ? 'opacity-100' : 'opacity-55',
+                  )}
+                />
+              </React.Fragment>
+            )
+          })}
+        </div>
       </div>
     </div>
   )

From 547e1eec5fd037e18d053bddc4bc9a9332aca273 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 5 Aug 2026 10:38:33 +0900
Subject: [PATCH 3/6] fix(routes/index): keep the in-view observer on the
 scaled graph element

---
 src/routes/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index cba94b041..fa3313f6a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -611,8 +611,9 @@ function FrameworkAdapterGraph({
     // than re-deriving every coordinate. The scale tracks the container's own
     // width so it fills whatever slot it lands in, capped at 1.35 — the ratio
     // the 460px `lg` slot was designed around.
-    <div ref={rootRef} className="@container flex w-full justify-center">
+    <div className="@container flex w-full justify-center">
       <div
+        ref={rootRef}
         aria-hidden="true"
         style={{
           transform: 'scale(clamp(0.8, calc(100cqw / 320px), 1.35))',

From 9adc175045c40fad8152c6e9fb400abac060b36c Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 5 Aug 2026 10:49:44 +0900
Subject: [PATCH 4/6] fix(routes/index): scale the adapter graph from the
 viewport, not a container query

---
 src/routes/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index fa3313f6a..f8e3a2b1e 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -608,15 +608,17 @@ function FrameworkAdapterGraph({
   return (
     // The node positions below are hard-coded against a 320×128 grid
     // (adapterGraphWidth/Height), so the whole graph is scaled as a unit rather
-    // than re-deriving every coordinate. The scale tracks the container's own
-    // width so it fills whatever slot it lands in, capped at 1.35 — the ratio
-    // the 460px `lg` slot was designed around.
-    <div className="@container flex w-full justify-center">
+    // than re-deriving every coordinate. Below `lg` the slot is the viewport
+    // minus the page's `px-4` and the panel's `p-6`; from `lg` it is a fixed
+    // 460px, which the 1.35 cap matches. Deliberately not a container query:
+    // `container-type` on an ancestor makes IntersectionObserver report the
+    // graph as offscreen, which silently disables the motion added in #1093.
+    <div className="flex w-full justify-center">
       <div
         ref={rootRef}
         aria-hidden="true"
         style={{
-          transform: 'scale(clamp(0.8, calc(100cqw / 320px), 1.35))',
+          transform: 'scale(clamp(0.8, calc((100vw - 64px) / 320px), 1.35))',
         }}
         className="relative h-32 w-[320px] shrink-0 origin-center font-mono text-[10px] font-bold"
       >

From e948dab0f7adc8851552b6ade19160619ee5cc78 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 5 Aug 2026 11:01:12 +0900
Subject: [PATCH 5/6] fix(routes/index): correct the adapter graph's
 available-width offset

---
 src/routes/index.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index f8e3a2b1e..223432c64 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -609,16 +609,17 @@ function FrameworkAdapterGraph({
     // The node positions below are hard-coded against a 320×128 grid
     // (adapterGraphWidth/Height), so the whole graph is scaled as a unit rather
     // than re-deriving every coordinate. Below `lg` the slot is the viewport
-    // minus the page's `px-4` and the panel's `p-6`; from `lg` it is a fixed
-    // 460px, which the 1.35 cap matches. Deliberately not a container query:
-    // `container-type` on an ancestor makes IntersectionObserver report the
-    // graph as offscreen, which silently disables the motion added in #1093.
+    // minus 80px — the page's `px-4` (16×2) plus the panel's `p-6` (24×2);
+    // from `lg` it is a fixed 460px, which the 1.35 cap matches. Deliberately
+    // not a container query: `container-type` on an ancestor makes
+    // IntersectionObserver report the graph as offscreen, which silently
+    // disables the motion added in #1093.
     <div className="flex w-full justify-center">
       <div
         ref={rootRef}
         aria-hidden="true"
         style={{
-          transform: 'scale(clamp(0.8, calc((100vw - 64px) / 320px), 1.35))',
+          transform: 'scale(clamp(0.75, calc((100vw - 80px) / 320px), 1.35))',
         }}
         className="relative h-32 w-[320px] shrink-0 origin-center font-mono text-[10px] font-bold"
       >

From 4d4fd51aa75b98d7ea14c817ce206168578aa78e Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Wed, 5 Aug 2026 11:09:46 +0900
Subject: [PATCH 6/6] refactor(routes/index): scale the adapter graph from its
 container width

---
 src/routes/index.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 223432c64..136876ff2 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -608,18 +608,16 @@ function FrameworkAdapterGraph({
   return (
     // The node positions below are hard-coded against a 320×128 grid
     // (adapterGraphWidth/Height), so the whole graph is scaled as a unit rather
-    // than re-deriving every coordinate. Below `lg` the slot is the viewport
-    // minus 80px — the page's `px-4` (16×2) plus the panel's `p-6` (24×2);
-    // from `lg` it is a fixed 460px, which the 1.35 cap matches. Deliberately
-    // not a container query: `container-type` on an ancestor makes
-    // IntersectionObserver report the graph as offscreen, which silently
-    // disables the motion added in #1093.
-    <div className="flex w-full justify-center">
+    // than re-deriving every coordinate. The scale tracks the wrapper's own
+    // width, so the graph fills whatever slot it lands in without restating the
+    // ancestors' padding. The 1.35 cap is the ratio the fixed 460px `lg` slot
+    // was designed around.
+    <div className="@container flex w-full justify-center">
       <div
         ref={rootRef}
         aria-hidden="true"
         style={{
-          transform: 'scale(clamp(0.75, calc((100vw - 80px) / 320px), 1.35))',
+          transform: 'scale(clamp(0.75, calc(100cqw / 320px), 1.35))',
         }}
         className="relative h-32 w-[320px] shrink-0 origin-center font-mono text-[10px] font-bold"
       >