fix(staged): cap New Note modal height to prevent overflow on long prompts - #646
Merged
Conversation
…ompts 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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
…om property 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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
min-heightandresize: verticalon the editor in favor of flex-based sizing withoverflow-y: autoTest plan
🤖 Generated with Claude Code