Lay out ntfy sink server URL and topic inputs on one line

Combines the ntfy server URL and topic fields into a single flex row
separated by a "/" to visually communicate that they compose into one
destination (server + topic), instead of stacking as two full-width
rows.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

tickets/013-ntfy-sink-inline-url-topic-fields.md

@@ -1,8 +0,0 @@
-# Combine ntfy sink URL and topic into one line
-
-The ntfy sink should not be 2 input fields stacked per line. Instead the URL input and topic input should sit on the same line, formatted like `<url-input>/<topic-input>` (not literally that string, but visually structured that way), with a clear separator between them indicating how the two values will be combined/used.
-
-## Acceptance criteria
-- The ntfy sink's URL and topic inputs are laid out on a single line instead of one per line.
-- A clear visual separator (e.g. a `/`) sits between the two inputs, indicating they combine into one destination (server URL + topic).
-- Existing saved URL/topic values still populate correctly into the two inputs.

webapp/src/components/NavMenu.tsx

@@ -456,22 +456,25 @@ function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }
           <HelpIcon sectionId="alerts" label="Help: Ntfy sink" />
         </div>
         <div className="flex flex-col gap-2">
-          <input
+          <div className="flex items-center gap-1.5">
-            type="text"
-            placeholder="topic"
-            value={ntfyTopicInput}
-            onChange={(e) => setNtfyTopicInput(e.target.value)}
-            onBlur={handleNtfyTopicBlur}
-            className="rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
-          />
             <input
               type="text"
               placeholder="https://ntfy.sh"
               value={ntfyServerInput}
               onChange={(e) => setNtfyServerInput(e.target.value)}
               onBlur={handleNtfyServerBlur}
-            className="rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
+              className="min-w-0 flex-[2] rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
             />
+            <span className="shrink-0 text-xs text-text-faint" aria-hidden="true">/</span>
+            <input
+              type="text"
+              placeholder="topic"
+              value={ntfyTopicInput}
+              onChange={(e) => setNtfyTopicInput(e.target.value)}
+              onBlur={handleNtfyTopicBlur}
+              className="min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
+            />
+          </div>
           {ntfyTestError && <div className="text-xs text-danger-text-strong">{ntfyTestError}</div>}
           {ntfyTestSuccess && <div className="text-xs text-text-secondary">Test notification sent.</div>}
           <button