Move toast to top center + bump 0.2.4

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"

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"

src/styles.css

@@ -843,30 +843,39 @@ 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,
     -apple-system,
     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% {