fix: prevent system prompt icon layout shift with invisible placeholder#144
Conversation
WalkthroughThe rendering logic for the system prompt section in the chat UI was updated so that the container and toggle button are always present in the DOM. When editing is not allowed, the section is visually hidden and the toggle button is disabled, rather than omitting these elements entirely. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatBox
participant SystemPromptSection
User->>ChatBox: Loads chat interface
ChatBox->>SystemPromptSection: Render system prompt UI
alt Editing allowed
SystemPromptSection->>User: Show toggle button (enabled)
User->>SystemPromptSection: Click toggle to expand/collapse
SystemPromptSection->>User: Show/hide editable textarea
else Editing not allowed
SystemPromptSection->>User: Show toggle button (disabled, invisible)
end
Assessment against linked issues
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR implements an elegant solution to prevent layout shifts in the chat interface when the system prompt icon loads for paid users. Instead of conditionally rendering the system prompt container ({canEditSystemPrompt && ...}), it now always renders the container but uses the invisible CSS class to hide it when necessary. This approach reserves the space upfront, preventing the chat interface from jumping when the billing status loads.
The change aligns well with the existing chat component architecture and follows web accessibility best practices by maintaining the element in the DOM structure. The button's disabled state is properly managed, and all existing functionality (like the active prompt indicator) remains intact.
Confidence score: 5/5
- This PR is extremely safe to merge with minimal risk
- The changes are isolated to UI rendering behavior, with no functional changes to the underlying system prompt logic
- Files needing attention: None - the changes are straightforward and well-contained in ChatBox.tsx
1 file reviewed, no comments
Edit PR Review Bot Settings | Greptile
AnthonyRonning
force-pushed
the
claude/issue-143-20250714_035334
branch
from
48ffe0e to
115a0a5
Compare
- Always render system prompt container div to reserve space - Use 'invisible' CSS class instead of conditional rendering - Prevent layout shift when billing status loads for paid users - Maintain accessibility with proper button disabled state Fixes #143 Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
There was a problem hiding this comment.
Greptile Summary
This PR also includes several additional changes beyond the layout fix covered in previous reviews:
-
Added support for two new pro-tier language models:
- Mistral Small 3.1 24B (128k token limit, vision support)
- Qwen 2.5 72B (128k token limit)
-
Updated pricing configuration to reflect these new models across all tiers
-
Improved model filtering logic to exclude transcription models
-
Version bump from 1.1.4 to 1.1.5 across multiple configuration files:
- frontend/package.json
- frontend/src-tauri/Cargo.toml
- frontend/src-tauri/tauri.conf.json
- iOS configuration files
PR Description Notes:
- The PR description focuses only on the layout fix but includes significant model additions that should have been mentioned
Confidence score: 4/5
- Changes are well-tested and mostly isolated, but broader than described
- While the layout fix is safe, the addition of new models warrants more careful testing
- Files needing attention: ModelSelector.tsx and pricingConfig.tsx to verify model configurations
8 files reviewed, no comments
Edit PR Review Bot Settings | Greptile
Deploying maple with
|
| Latest commit: |
115a0a5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9bd0dd60.maple-ca8.pages.dev |
| Branch Preview URL: | https://claude-issue-143-20250714-03-hpjn.maple-ca8.pages.dev |
1 participant
Fixes layout shift issue when system prompt icon loads for paid users by implementing invisible placeholder approach.
Changes
invisibleCSS class instead of conditional renderingFixes #143
Generated with Claude Code
Summary by CodeRabbit
Style
User Interface