From 2419571c39a28957d45750fcc57f518c8bd8cbfe Mon Sep 17 00:00:00 2001
From: Artjoms Stukans <artjoms.stukans@gmail.com>
Date: Sun, 27 Sep 2026 18:36:18 +0200
Subject: [PATCH 1/2] Fit the LLM dialogs to the window and line up their price
 fields

The Add model dialog was taller than a laptop window: it ran off screen
and its Cancel and Add buttons were only partly visible. The price
inputs also sat at different heights, because a label that wraps for
its "optional" marker is taller than one that does not.

- The model and provider dialogs are capped at the window height. Their
  fields scroll inside, and the buttons stay pinned at the bottom.
- Each price field spans three rows of a CSS subgrid (label, input,
  check box), so the two labels of a row share one height and both
  inputs sit on one line.
- A contract test holds both rules and the markup that uses them.
---
 .../src/components/SettingsLlmModelForm.tsx   |  2 +-
 .../components/SettingsLlmModelRateFields.tsx |  6 ++--
 .../src/components/SettingsLlmProviders.tsx   |  2 +-
 spire-ui/src/index.css                        | 17 ++++++++++
 spire-ui/src/llmDialogs.contract.test.ts      | 32 +++++++++++++++++++
 5 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 spire-ui/src/llmDialogs.contract.test.ts

diff --git a/spire-ui/src/components/SettingsLlmModelForm.tsx b/spire-ui/src/components/SettingsLlmModelForm.tsx
index e4222bda..3d0e9ead 100644
--- a/spire-ui/src/components/SettingsLlmModelForm.tsx
+++ b/spire-ui/src/components/SettingsLlmModelForm.tsx
@@ -131,7 +131,7 @@ export default function SettingsLlmModelForm({ initial, onClose, onSaved }: Sett
 
   return (
     <div className="modal-overlay">
-      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
+      <div className="modal tall" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
         <h3>{editing ? 'Edit model' : 'Add model'}</h3>
         <form className="modal-body" onSubmit={submit}>
           <div className="field-row-2">
diff --git a/spire-ui/src/components/SettingsLlmModelRateFields.tsx b/spire-ui/src/components/SettingsLlmModelRateFields.tsx
index 73ad4589..cba2c376 100644
--- a/spire-ui/src/components/SettingsLlmModelRateFields.tsx
+++ b/spire-ui/src/components/SettingsLlmModelRateFields.tsx
@@ -89,9 +89,9 @@ interface RateFieldProps {
 function RateField({ type, value, onChange, notBilled, onNotBilled }: RateFieldProps) {
   const optional = !MANDATORY_RATE_TYPES.includes(type);
   return (
-    <div className="field">
+    <div className="rate-field">
       <label className="field">
-        <span>
+        <span className="rate-label">
           {TOKEN_TYPE_LABEL[type]} rate $ / 1M tokens {optional && <span className="field-optional">optional</span>}
         </span>
         <input
@@ -132,7 +132,7 @@ interface ModelRateFieldsProps {
 export default function ModelRateFields({ rates, onChange, notBilled, onNotBilled }: ModelRateFieldsProps) {
   return (
     <>
-      <div className="field-row-2">
+      <div className="rate-grid">
         {RATE_TYPES.map((type) => (
           <RateField key={type} type={type} value={rates[type]} onChange={(v) => onChange(type, v)}
             notBilled={!!notBilled[type]} onNotBilled={(v) => onNotBilled(type, v)} />
diff --git a/spire-ui/src/components/SettingsLlmProviders.tsx b/spire-ui/src/components/SettingsLlmProviders.tsx
index 7c90beb2..c250ebff 100644
--- a/spire-ui/src/components/SettingsLlmProviders.tsx
+++ b/spire-ui/src/components/SettingsLlmProviders.tsx
@@ -429,7 +429,7 @@ function LlmProviderForm({
 
   return (
     <div className="modal-overlay">
-      <div className="modal" onClick={(e) => e.stopPropagation()}>
+      <div className="modal tall" onClick={(e) => e.stopPropagation()}>
         <h3>{editing ? 'Edit LLM provider' : 'Add LLM provider'}</h3>
         <form className="modal-body" onSubmit={submit}>
           <label className="field">
diff --git a/spire-ui/src/index.css b/spire-ui/src/index.css
index c4b81585..28886507 100644
--- a/spire-ui/src/index.css
+++ b/spire-ui/src/index.css
@@ -803,6 +803,15 @@
   }
   /* Roomier variant for content-heavy dialogs (e.g. the webhook-created reveal + setup checklist). */
   .modal.wide { max-width: 600px; }
+  /* A dialog that can be taller than the window: it is capped at the window, its fields scroll, and the
+     buttons stay pinned at the bottom. The model dialog ran off screen with its Save button half hidden. */
+  .modal.tall { max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
+  .modal.tall > h3 { flex: none; }
+  .modal.tall > .modal-body { overflow-y: auto; min-height: 0; }
+  .modal.tall .modal-actions {
+    position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px;
+    background: var(--panel); border-top: 1px solid var(--border);
+  }
   .modal-head {
     display: flex; align-items: center; gap: 12px;
     padding: 15px 18px; border-bottom: 1px solid var(--border);
@@ -1138,6 +1147,14 @@
     border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; word-break: break-all;
   }
   .field-optional { color: var(--text-3); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
+  /* The price fields line up across both columns whether or not a label wraps for its "optional" marker:
+     each field spans three rows of the grid (label, input, check box) as a subgrid, so the two labels of a
+     row share one track and sit at its bottom. The label element is display: contents so its text and its
+     input can each take a row; it still labels the input. */
+  .rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+  .rate-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
+  .rate-field > label.field { display: contents; }
+  .rate-label { align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
   .field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
   .field-row-12 { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; align-items: start; }
 
diff --git a/spire-ui/src/llmDialogs.contract.test.ts b/spire-ui/src/llmDialogs.contract.test.ts
new file mode 100644
index 00000000..46e62894
--- /dev/null
+++ b/spire-ui/src/llmDialogs.contract.test.ts
@@ -0,0 +1,32 @@
+import { expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * The LLM dialogs are taller than a laptop window: the model dialog ran off screen with its buttons half
+ * hidden, and its price inputs sat at different heights (feedback, 2026-09-27). Layout cannot be measured
+ * in jsdom, so this holds the two rules that fix it and the markup that uses them.
+ */
+const SRC = join(__dirname);
+const read = (file: string) => readFileSync(join(SRC, file), 'utf8');
+
+it('caps a tall dialog at the window and keeps its buttons in view', () => {
+  const css = read('index.css');
+  expect(css.length).toBeGreaterThan(0);
+  expect(css).toMatch(/\.modal\.tall \{[^}]*max-height: calc\(100vh - 40px\)/);
+  expect(css).toMatch(/\.modal\.tall > \.modal-body \{[^}]*overflow-y: auto/);
+  expect(css).toMatch(/\.modal\.tall \.modal-actions \{[^}]*position: sticky/);
+  expect(read('components/SettingsLlmModelForm.tsx')).toContain('className="modal tall"');
+  expect(read('components/SettingsLlmProviders.tsx')).toContain('className="modal tall"');
+});
+
+it('lets the two price labels of a row share one height so the inputs line up', () => {
+  const css = read('index.css');
+  expect(css).toMatch(/\.rate-field \{[^}]*grid-row: span 3;[^}]*grid-template-rows: subgrid/);
+  expect(css).toMatch(/\.rate-field > label\.field \{[^}]*display: contents/);
+  expect(css).toMatch(/\.rate-label \{[^}]*align-self: end/);
+  const fields = read('components/SettingsLlmModelRateFields.tsx');
+  expect(fields).toContain('<div className="rate-grid">');
+  expect(fields).toContain('<div className="rate-field">');
+  expect(fields).toContain('<span className="rate-label">');
+});

From cb845ce1c4c13cc8249b735d3deca6407c39ff20 Mon Sep 17 00:00:00 2001
From: Artjoms Stukans <artjoms.stukans@gmail.com>
Date: Sun, 27 Sep 2026 18:49:18 +0200
Subject: [PATCH 2/2] Stack the price fields in one column on a narrow screen

The rate grid replaced .field-row-2, so the 560px breakpoint that stacks
the other field rows no longer reached the price fields: at 320px each
input was 116px wide. Add .rate-grid to that breakpoint, and hold it in
the dialog contract test.
---
 spire-ui/src/index.css                   | 2 +-
 spire-ui/src/llmDialogs.contract.test.ts | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/spire-ui/src/index.css b/spire-ui/src/index.css
index 28886507..04805c01 100644
--- a/spire-ui/src/index.css
+++ b/spire-ui/src/index.css
@@ -1398,7 +1398,7 @@
   .chip-x button:hover { color: var(--crit); }
 
   @media (max-width: 560px) {
-    .field-row-2, .field-row-12, .field-row-13 { grid-template-columns: 1fr; }
+    .field-row-2, .field-row-12, .field-row-13, .rate-grid { grid-template-columns: 1fr; }
   }
 
   /* Settings → Prompts: list of prompt kinds, each a link into its detail/edit page */
diff --git a/spire-ui/src/llmDialogs.contract.test.ts b/spire-ui/src/llmDialogs.contract.test.ts
index 46e62894..5af5972b 100644
--- a/spire-ui/src/llmDialogs.contract.test.ts
+++ b/spire-ui/src/llmDialogs.contract.test.ts
@@ -25,6 +25,8 @@ it('lets the two price labels of a row share one height so the inputs line up',
   expect(css).toMatch(/\.rate-field \{[^}]*grid-row: span 3;[^}]*grid-template-rows: subgrid/);
   expect(css).toMatch(/\.rate-field > label\.field \{[^}]*display: contents/);
   expect(css).toMatch(/\.rate-label \{[^}]*align-self: end/);
+  // On a narrow screen the price fields stack in one column, like the other field rows (review of PR #180).
+  expect(css).toMatch(/@media \(max-width: 560px\) \{\s*[^}]*\.rate-grid \{ grid-template-columns: 1fr; \}/);
   const fields = read('components/SettingsLlmModelRateFields.tsx');
   expect(fields).toContain('<div className="rate-grid">');
   expect(fields).toContain('<div className="rate-field">');