From 834accfdc5179b3e3eff065a13a57135855bc78b Mon Sep 17 00:00:00 2001
From: professorpalmer <professorpalmer9@gmail.com>
Date: Sun, 13 Sep 2026 23:43:44 -0500
Subject: [PATCH] fix(chrome): lighter feed fade, align rail gear with +,
 easier PC hit

Whisper the feed edge fade (soft stop, bottom-only, thinner band). Center
compact rail + / Settings on a shared enterSize cell. Soften titlebar PC
padding so Inspect is easier to hit without breaking native click tests.
---
 src/app.tsx              | 26 ++++++++++++++++++++++----
 src/chrome/edge-fade.tsx | 16 ++++++++++------
 src/chrome/layout.ts     |  9 +++++----
 src/chrome/list-row.tsx  | 25 +++++++++++++++++++++----
 src/chrome/titlebar.tsx  |  2 --
 src/chrome/tooltip.tsx   | 10 +++++++++-
 tests/wave6-p2.test.ts   |  2 +-
 7 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 8949fb3..e7d8ff5 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1852,8 +1852,17 @@ function Rail({
         )
       })}
       <div style={{ flexGrow: 1 }} />
-      <div style={{ marginLeft: rowMargin, marginRight: rowMargin, marginBottom: T.space.xxs }}>
-        <Tip testId="rail-new-tip" label="New automaton" side="top">
+      <div
+        style={{
+          marginLeft: rowMargin,
+          marginRight: rowMargin,
+          marginBottom: T.space.xxs,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: compact ? 'center' : 'stretch',
+        }}
+      >
+        <Tip testId="rail-new-tip" label="New automaton" side="top" fullWidth>
           <ListRow
             testId="new-agent"
             density={compact ? 'compact' : 'default'}
@@ -1864,8 +1873,17 @@ function Rail({
           </ListRow>
         </Tip>
       </div>
-      <div style={{ marginLeft: rowMargin, marginRight: rowMargin, marginBottom: T.space.md }}>
-        <Tip testId="rail-settings-tip" label="Settings (Cmd+,)" side="top">
+      <div
+        style={{
+          marginLeft: rowMargin,
+          marginRight: rowMargin,
+          marginBottom: T.space.md,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: compact ? 'center' : 'stretch',
+        }}
+      >
+        <Tip testId="rail-settings-tip" label="Settings (Cmd+,)" side="top" fullWidth>
           <ListRow
             testId="settings-open"
             density={compact ? 'compact' : 'default'}
diff --git a/src/chrome/edge-fade.tsx b/src/chrome/edge-fade.tsx
index b36dbd8..0951236 100644
--- a/src/chrome/edge-fade.tsx
+++ b/src/chrome/edge-fade.tsx
@@ -13,15 +13,20 @@ export function transparentHex(color: string): string {
   return `${rgbHex(color)}00`
 }
 
+/** Soft opaque stop (~28% alpha) so the band is a whisper, not a slab. */
+export function softFadeHex(color: string): string {
+  return `${rgbHex(color)}48`
+}
+
 export function edgeFadeBackground(color: string, edge: 'top' | 'bottom') {
-  const solid = rgbHex(color)
+  const soft = softFadeHex(color)
   const clear = transparentHex(color)
   // CSS angle: 0 = up, 180 = down. Top band fades downward; bottom upward.
   return {
     type: 'linear-gradient' as const,
     angle: edge === 'top' ? 180 : 0,
     stops: [
-      { color: solid, position: 0 },
+      { color: soft, position: 0 },
       { color: clear, position: 1 },
     ] as [{ color: string; position: number }, { color: string; position: number }],
   }
@@ -29,13 +34,12 @@ export function edgeFadeBackground(color: string, edge: 'top' | 'bottom') {
 
 /**
  * Feed / rail edge-fade spike (Wave 6 P2).
- * Simple opacity ramp via gpuix two-stop linear-gradient — no EdgeFade crate.
- * Does not touch menu/toast fills (frost punch-through stays owned by opaque overlays).
+ * Soft opacity ramp — keep band thin; opaque overlays stay opaque elsewhere.
  */
 export function EdgeFadeFrame({
   children,
-  band = 28,
-  top = true,
+  band = 14,
+  top = false,
   bottom = true,
   color,
   testId = 'edge-fade',
diff --git a/src/chrome/layout.ts b/src/chrome/layout.ts
index 438533f..8aeddc7 100644
--- a/src/chrome/layout.ts
+++ b/src/chrome/layout.ts
@@ -54,11 +54,12 @@ export function controlClusterStyle(tokens: Tokens = DEFAULT_TOKENS) {
 }
 
 export function titlebarHitStyle(tokens: Tokens = DEFAULT_TOKENS) {
+  // Larger padding = easier click without changing layout flex of the titlebar cluster.
   return {
-    paddingLeft: tokens.space.xs,
-    paddingRight: tokens.space.xs,
-    paddingTop: tokens.space.xs,
-    paddingBottom: tokens.space.xs,
+    paddingLeft: tokens.space.md,
+    paddingRight: tokens.space.md,
+    paddingTop: tokens.space.sm,
+    paddingBottom: tokens.space.sm,
     borderRadius: tokens.radius.sm,
     cursor: 'pointer' as const,
     pointerEvents: 'auto' as const,
diff --git a/src/chrome/list-row.tsx b/src/chrome/list-row.tsx
index b53d707..ccf17ac 100644
--- a/src/chrome/list-row.tsx
+++ b/src/chrome/list-row.tsx
@@ -47,6 +47,7 @@ export function ListRow({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: children ? 'flex-start' : 'center',
         gap: T.space.sm,
         paddingLeft: padX,
         paddingRight: padX,
@@ -55,6 +56,7 @@ export function ListRow({
         borderRadius: T.radius.md,
         backgroundColor: selected ? T.selected : T.clear,
         minWidth: 0,
+        width: '100%',
         ...HIT,
         hover: { backgroundColor: selected ? T.selected : T.raised },
       }}
@@ -68,10 +70,25 @@ export function ListRow({
         if (event.isRightClick || event.button === 2) onContextMenu?.(event)
       }}
     >
-      {startSlot ? <div style={{ flexShrink: 0 }}>{startSlot}</div> : null}
-      <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0, gap: T.space.xxs }}>
-        {children}
-      </div>
+      {startSlot ? (
+        <div
+          style={{
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: compact ? T.blob.enterSize : undefined,
+            height: compact ? T.blob.enterSize : undefined,
+          }}
+        >
+          {startSlot}
+        </div>
+      ) : null}
+      {children ? (
+        <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0, gap: T.space.xxs }}>
+          {children}
+        </div>
+      ) : null}
       {endSlot ? <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'row', gap: T.space.xs }}>{endSlot}</div> : null}
       {endHoverSlot && hovered ? (
         <div
diff --git a/src/chrome/titlebar.tsx b/src/chrome/titlebar.tsx
index f4feca5..30ec1c6 100644
--- a/src/chrome/titlebar.tsx
+++ b/src/chrome/titlebar.tsx
@@ -140,8 +140,6 @@ export function Titlebar({
             testId="titlebar-jobs"
             style={{
               ...titlebarHitStyle(T),
-              paddingLeft: T.space.sm,
-              paddingRight: T.space.sm,
               fontSize: T.type.xs,
               color: T.secondary,
             }}
diff --git a/src/chrome/tooltip.tsx b/src/chrome/tooltip.tsx
index de2e15d..6a1c7ec 100644
--- a/src/chrome/tooltip.tsx
+++ b/src/chrome/tooltip.tsx
@@ -10,18 +10,26 @@ export function Tip({
   children,
   testId,
   side = 'bottom',
+  fullWidth = false,
 }: {
   label: string
   children: React.ReactNode
   testId?: string
   side?: 'top' | 'bottom' | 'right'
+  fullWidth?: boolean
 }) {
   const T = useTokens()
   const [open, setOpen] = useState(false)
   return (
     <div
       testId={testId}
-      style={{ position: 'relative', display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: fullWidth ? '100%' : undefined,
+      }}
       onMouseEnter={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
     >
diff --git a/tests/wave6-p2.test.ts b/tests/wave6-p2.test.ts
index c15027a..ea4f83d 100644
--- a/tests/wave6-p2.test.ts
+++ b/tests/wave6-p2.test.ts
@@ -115,7 +115,7 @@ describe('wave 6 p2 edge fade spike', () => {
     const top = edgeFadeBackground('#101010', 'top')
     expect(top.type).toBe('linear-gradient')
     expect(top.angle).toBe(180)
-    expect(top.stops[0].color).toBe('#101010')
+    expect(top.stops[0].color).toBe('#10101048')
     expect(top.stops[1].color).toBe('#10101000')
     const app = readFileSync(join(root, 'src/app.tsx'), 'utf8')
     expect(app).toContain('EdgeFadeFrame')