From ce961244ca4de1e96f19739016481ceec9bfab48 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 8 Jul 2026 14:36:51 -0500
Subject: [PATCH 1/2] move toasts to top middle of page, tweak size and anim

---
 src/App.tsx    | 53 +++++++++++++++++++++++++++-----------------------
 src/styles.css | 27 ++++++++++++++++---------
 2 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0b99b82..fe7e484 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -107,7 +107,7 @@ function useIsWide(): boolean {
   )
 }
 
-function useToast(duration = 1500) {
+function useToast(duration = 1400) {
   const [toast, setToast] = useState<{
     content: React.ReactNode
     key: number
@@ -1689,33 +1689,38 @@ function DiffView() {
         />
       )}
       <div className="diff-container">
-        <ProgressBar
-          command={data.revset}
-          fileHashes={fileHashes}
-          viewed={viewed}
-          theme={theme}
-          onCycleTheme={cycleTheme}
-          onUnviewAll={() => {
-            const entries = Object.entries(viewed).map(([file, hash]) => ({ file, hash }))
-            if (entries.length === 0) return
-            // Mirror single-file unview, which also opens the file.
-            setCollapsed((prev) => {
-              const next = { ...prev }
-              for (const { file } of entries) next[file] = false
-              return next
-            })
-            unviewAllMutation.mutate(entries)
-          }}
-        />
+        {/* Wrapper is the positioning context for the toast, which floats
+            centered over the header bar without participating in its flex row
+            (the bar's two sides can meet on narrow viewports). */}
+        <div className="header-row">
+          <ProgressBar
+            command={data.revset}
+            fileHashes={fileHashes}
+            viewed={viewed}
+            theme={theme}
+            onCycleTheme={cycleTheme}
+            onUnviewAll={() => {
+              const entries = Object.entries(viewed).map(([file, hash]) => ({ file, hash }))
+              if (entries.length === 0) return
+              // Mirror single-file unview, which also opens the file.
+              setCollapsed((prev) => {
+                const next = { ...prev }
+                for (const { file } of entries) next[file] = false
+                return next
+              })
+              unviewAllMutation.mutate(entries)
+            }}
+          />
+          {toast && (
+            <div className="toast" key={toast.key}>
+              {toast.content}
+            </div>
+          )}
+        </div>
         {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
         {showCommentsInfo && (
           <CommentsModal vcs={data.vcs} onClose={() => setShowCommentsInfo(false)} />
         )}
-        {toast && (
-          <div className="toast" key={toast.key}>
-            {toast.content}
-          </div>
-        )}
         <CodeView
           ref={codeViewRef}
           className="codeview-root"
diff --git a/src/styles.css b/src/styles.css
index 3730890..5a2d42b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -843,17 +843,26 @@ body,
   color: var(--fg-muted);
 }
 
-/* Ephemeral toast */
+/* Positioning context for the toast: the toast floats centered over the
+   header bar instead of joining its flex row, so it never pushes the bar's
+   two sides apart on narrow viewports. */
+.header-row {
+  position: relative;
+}
+
+/* Ephemeral toast. Taller than the header bar; the overflow bleeds evenly
+   above and below so it still reads as centered on the bar. */
 .toast {
-  position: fixed;
-  bottom: 24px;
-  left: 24px;
-  padding: 12px 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 8px 14px;
   background: var(--bg-control);
   border: 1px solid var(--border-strong);
-  border-radius: 8px;
+  border-radius: 6px;
   color: var(--fg-bright);
-  font-size: 16px;
+  font-size: 13px;
   font-weight: 500;
   font-family:
     system-ui,
@@ -861,12 +870,12 @@ body,
     sans-serif;
   z-index: 200;
   pointer-events: none;
-  animation: toast-fade 1.5s ease forwards;
+  animation: toast-fade 1.4s ease-in forwards;
 }
 
 @keyframes toast-fade {
   0%,
-  60% {
+  86% {
     opacity: 1;
   }
   100% {

From a93b640d43eb68e1ae17509b4b69baffc5a70df9 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 8 Jul 2026 16:16:46 -0500
Subject: [PATCH 2/2] bump to 0.2.4

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48b4a00..6cb17b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oxide/skepsis",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oxide/skepsis",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "bin": {
         "skepsis": "dist/cli.js"
       },
diff --git a/package.json b/package.json
index 91b88c6..5cc13a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oxide/skepsis",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "repository": "github:oxidecomputer/skepsis",
   "bin": {
     "skepsis": "dist/cli.js"