From 945c2d455bb03a9e2833402159a079f9fc526fde Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Tue, 14 Apr 2026 11:56:52 +1000 Subject: [PATCH 01/10] fix(staged): cap New Note modal height to prevent overflow on long prompts Add max-height and overflow-y scroll to the modal so the Start button remains visible when a large amount of text is pasted into the prompt. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/sessions/NewSessionModal.svelte | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index 87abca1bd..cf76a996f 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -450,6 +450,7 @@ flex-direction: column; width: 580px; max-width: 90vw; + max-height: calc(100vh - 12vh - 4vh); background: var(--bg-chrome); border: 2px solid transparent; border-radius: 12px; @@ -597,6 +598,8 @@ display: flex; flex-direction: column; gap: 14px; + overflow-y: auto; + min-height: 0; } .repo-info { From 02d53d909686360691d3bdfbdc0a8b698a622a80 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Wed, 15 Apr 2026 09:41:56 +1000 Subject: [PATCH 02/10] fix(staged): scroll only the text editor, not the entire New Note modal Move overflow scrolling from the modal body to the hashtag editor itself by removing overflow-y from .modal-body and adding a max-height to the editor, so the dialog chrome (buttons, header) stays fixed. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/sessions/NewSessionModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index cf76a996f..fbf0b3fdd 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -598,7 +598,6 @@ display: flex; flex-direction: column; gap: 14px; - overflow-y: auto; min-height: 0; } @@ -629,6 +628,7 @@ line-height: 1.5; resize: vertical; min-height: 240px; + max-height: calc(100vh - 12vh - 4vh - 200px); transition: border-color 0.15s; } From 8fd84b6aa417c879abadb58013bd036f392d85ed Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Wed, 15 Apr 2026 10:01:50 +1000 Subject: [PATCH 03/10] fix(staged): scroll only the text editor, not the entire New Note modal Use flex layout to cascade the modal's max-height constraint down through the body, form-group, and HashtagInput wrappers to the contenteditable editor. The editor fills available space and scrolls internally, keeping the Start button and other dialog chrome visible. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../lib/features/sessions/NewSessionModal.svelte | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index fbf0b3fdd..76b4a49c6 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -599,6 +599,7 @@ flex-direction: column; gap: 14px; min-height: 0; + overflow: hidden; } .repo-info { @@ -615,6 +616,17 @@ display: flex; flex-direction: column; gap: 4px; + min-height: 0; + flex: 1 1 0; + overflow: hidden; + } + + .form-group :global(.hashtag-input-wrapper), + .form-group :global(.hashtag-input-container) { + min-height: 0; + flex: 1 1 0; + display: flex; + flex-direction: column; } .form-group :global(.hashtag-editor) { @@ -627,8 +639,8 @@ font-family: inherit; line-height: 1.5; resize: vertical; - min-height: 240px; - max-height: calc(100vh - 12vh - 4vh - 200px); + min-height: 0; + flex: 1 1 0; transition: border-color 0.15s; } From a1512c3b36b763583942e20594b16c016bbafbc4 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Tue, 21 Apr 2026 17:03:49 +1000 Subject: [PATCH 04/10] fix(staged): restore min-height on New Note text editor The previous flex-based fix removed the 240px min-height, causing the text box to collapse to zero height when empty. Restore the min-height so the editor has a usable default size, and add overflow-y: auto so it scrolls internally when content exceeds available space. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/sessions/NewSessionModal.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index 76b4a49c6..7962df328 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -639,8 +639,9 @@ font-family: inherit; line-height: 1.5; resize: vertical; - min-height: 0; + min-height: 240px; flex: 1 1 0; + overflow-y: auto; transition: border-color 0.15s; } From 88416d7bb859532cacb479c043697c3759316de4 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Tue, 21 Apr 2026 17:11:41 +1000 Subject: [PATCH 05/10] fix(staged): restore min-height on New Note text editor Revert the over-engineered flex cascade that caused the text box to collapse to zero height when empty. Instead, keep the original min-height: 240px and simply add a max-height + overflow-y: auto on the editor so it scrolls internally when content is long. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../lib/features/sessions/NewSessionModal.svelte | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index 7962df328..043135769 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -598,8 +598,6 @@ display: flex; flex-direction: column; gap: 14px; - min-height: 0; - overflow: hidden; } .repo-info { @@ -616,17 +614,6 @@ display: flex; flex-direction: column; gap: 4px; - min-height: 0; - flex: 1 1 0; - overflow: hidden; - } - - .form-group :global(.hashtag-input-wrapper), - .form-group :global(.hashtag-input-container) { - min-height: 0; - flex: 1 1 0; - display: flex; - flex-direction: column; } .form-group :global(.hashtag-editor) { @@ -640,7 +627,7 @@ line-height: 1.5; resize: vertical; min-height: 240px; - flex: 1 1 0; + max-height: calc(100vh - 12vh - 4vh - 200px); overflow-y: auto; transition: border-color 0.15s; } From 644f24e771ae48fed073aad90ea1b6768cfc2a5b Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Tue, 21 Apr 2026 17:21:26 +1000 Subject: [PATCH 06/10] fix(staged): use same text editor height for all New Session modes The review mode was passing rows=4 to HashtagInput while other modes used rows=12. Since HashtagInput sets an inline min-height based on rows, the review dialog appeared much shorter. Use rows=12 for all modes so the dialog height is consistent. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/sessions/NewSessionModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index 043135769..e33aabbfd 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -393,7 +393,7 @@ : isCommit ? 'Describe the change…' : notePlaceholder} - rows={isReview ? 4 : 12} + rows={12} disabled={starting} items={hashtagItems} /> From 591d93ef19ab0655230a1d1587af355f20055af2 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Tue, 21 Apr 2026 19:14:58 +1000 Subject: [PATCH 07/10] refactor(staged): extract magic 200px into --modal-chrome-height custom property MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the magic 200px in the editor's max-height calc with a named CSS custom property --modal-chrome-height, defined on .modal with a comment explaining the height budget. This makes the relationship between the modal's max-height and the editor's max-height explicit and easy to update if the chrome (header, buttons, padding) changes. No visual change — purely a readability refactor. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/lib/features/sessions/NewSessionModal.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index e33aabbfd..1abffdf8d 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -446,6 +446,12 @@ } .modal { + /* Modal height budget: + 100vh - padding-top (12vh) - bottom breathing room (4vh). + --modal-chrome-height is the non-editor chrome inside the modal + (header, padding, buttons, gaps) — used by the editor to size itself. */ + --modal-chrome-height: 200px; + display: flex; flex-direction: column; width: 580px; @@ -627,7 +633,7 @@ line-height: 1.5; resize: vertical; min-height: 240px; - max-height: calc(100vh - 12vh - 4vh - 200px); + max-height: calc(100vh - 12vh - 4vh - var(--modal-chrome-height)); overflow-y: auto; transition: border-color 0.15s; } From e1b556c1fd61a445ff7cd66a4db25b2f07b46514 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Wed, 22 Apr 2026 08:34:24 +1000 Subject: [PATCH 08/10] fix(staged): use flex cascade instead of calc() for editor max-height The --modal-chrome-height custom property underestimated the actual chrome height, so the buttons were still clipped at the bottom when the editor was at maximum height. Replace the fragile calc()-based max-height with a flex cascade: modal-body and form-group get flex: 1 + min-height: 0 so the modal's max-height constraint flows down to the editor, which uses flex: 1 + min-height: 240px to fill available space and scroll internally. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/lib/features/sessions/NewSessionModal.svelte | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index 1abffdf8d..d92db318b 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -446,12 +446,6 @@ } .modal { - /* Modal height budget: - 100vh - padding-top (12vh) - bottom breathing room (4vh). - --modal-chrome-height is the non-editor chrome inside the modal - (header, padding, buttons, gaps) — used by the editor to size itself. */ - --modal-chrome-height: 200px; - display: flex; flex-direction: column; width: 580px; @@ -604,6 +598,8 @@ display: flex; flex-direction: column; gap: 14px; + flex: 1; + min-height: 0; } .repo-info { @@ -620,6 +616,8 @@ display: flex; flex-direction: column; gap: 4px; + flex: 1; + min-height: 0; } .form-group :global(.hashtag-editor) { @@ -632,8 +630,8 @@ font-family: inherit; line-height: 1.5; resize: vertical; + flex: 1; min-height: 240px; - max-height: calc(100vh - 12vh - 4vh - var(--modal-chrome-height)); overflow-y: auto; transition: border-color 0.15s; } From a798711983209fd58352732cbd56b62ef3ae1a32 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Wed, 22 Apr 2026 15:12:26 +1000 Subject: [PATCH 09/10] fix(staged): propagate flex constraint through HashtagInput wrappers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous flex cascade fix didn't work because the .hashtag-input-wrapper and .hashtag-input-container divs inside HashtagInput broke the flex chain — they were plain block elements that grew to fit content. Add flex: 1 + min-height: 0 + display: flex on both wrappers so the modal's max-height constraint reaches the contenteditable editor. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../lib/features/sessions/NewSessionModal.svelte | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index d92db318b..b58c28f5d 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -620,6 +620,21 @@ min-height: 0; } + /* Propagate flex constraint through HashtagInput wrapper divs */ + .form-group :global(.hashtag-input-wrapper) { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + } + + .form-group :global(.hashtag-input-container) { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + } + .form-group :global(.hashtag-editor) { padding: 10px 12px; background: var(--bg-primary); From b93ea90783b24768a5ef80000e9bb34ea63160b9 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Wed, 22 Apr 2026 15:17:11 +1000 Subject: [PATCH 10/10] fix(staged): remove dead min-height and resize on New Note editor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove resize: vertical which allowed users to drag-resize the editor beyond the modal's max-height, defeating the scroll constraint. Remove min-height: 240px which was dead code — the inline style from rows=12 sets min-height: 18em which always wins over the stylesheet rule. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/sessions/NewSessionModal.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte index b58c28f5d..ea65b786c 100644 --- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte +++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte @@ -644,9 +644,7 @@ font-size: var(--size-sm); font-family: inherit; line-height: 1.5; - resize: vertical; flex: 1; - min-height: 240px; overflow-y: auto; transition: border-color 0.15s; }