Home: widen the brain layout, fix its entrance, add a clear button to pinned charts

The force layout settled roughly square, so in a wide band the graph sat as a
small island. Vertical centring now pulls nearly three times as hard as
horizontal and the seed sits on an ellipse, which settles at about 2.2:1
without stretching the circles or the edges.

The graph also slid in on load: the rebuild fit ran with a 300ms duration, so
React Flow animated the pan from its default viewport to the content. The fit
is instant now, and the canvas grows in from the centre with `scaleIn` once it
has a layout.

The pinned chart header said "Esc clears", which a phone cannot act on. It
carries the same "× Clear" button as the list header instead; Escape still
works.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017MeiWk3Yq12n2pTvnQWYvt

frontend/src/components/Health/HealthActivity.tsx

@@ -59,6 +59,28 @@ function useMoment() {
 
 type Moment = ReturnType<typeof useMoment>
 
+/**
+ * The way out of a held moment, on both the chart that set it and the list it
+ * drives — the same control in both places, because it is the same action.
+ *
+ * A control rather than the Escape hint it replaces on the chart: a phone has
+ * no Escape key. The shortcut still works, it is just no longer the only way.
+ */
+function ClearPin({ moment }: { moment: Moment }) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="-my-1 gap-1 px-2 text-xs"
+      onClick={moment.release}
+      aria-label="Clear the pinned moment"
+    >
+      <X className="size-3" />
+      Clear
+    </Button>
+  )
+}
+
 /** One chart, and the moment it hands to its list. */
 function Chart({
   title,
@@ -81,9 +103,11 @@ function Chart({
     >
       <div className="flex items-baseline justify-between gap-2">
         <h2 className={PANEL_SECTION}>{title}</h2>
-        <span className="text-xs text-muted-foreground">
-          {moment.pinned !== null ? "Esc clears" : "click to pin"}
-        </span>
+        {moment.pinned !== null ? (
+          <ClearPin moment={moment} />
+        ) : (
+          <span className="text-xs text-muted-foreground">click to pin</span>
+        )}
       </div>
       <UplotChart
         labels={labels}
@@ -106,17 +130,7 @@ function ListHeader({ title, moment }: { title: string; moment: Moment }) {
           {moment.pinned !== null ? "pinned to" : "showing"} {clock(moment.at)}
         </span>
       ) : null}
-      {moment.pinned !== null ? (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="-my-1 h-6 gap-1 px-2 text-xs"
-          onClick={moment.release}
-        >
-          <X className="size-3" />
-          Clear
-        </Button>
-      ) : null}
+      {moment.pinned !== null ? <ClearPin moment={moment} /> : null}
     </div>
   )
 }