UN-3185: Pin LLM profile form submit button as a sticky footer#2119
Conversation
In the prompt-studio Settings modal, the LLM-profile Add/Edit form put its submit button (Update/Add) as the last element in normal flow inside a fixed 800px scroll column. When the form is tall — e.g. Advanced Settings expanded — the button flowed past the modal's visible area and appeared to overflow. - Make the button a sticky footer (position: sticky; bottom: 0) with a solid themed background so it stays pinned at the bottom of the scroll column and fields scroll beneath it. - The form root's .settings-body-pad-top declared overflow-y: auto with no bounded height — a dead nested scroll context that would stop the sticky footer from pinning to the real scroller (.conn-modal-col). Override it back to visible for this form (scoped via .add-llm-profile-scroll-root). Verified the sticky pinning against the real CSS rules; build green, biome clean.
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
Cache: Disabled due to Reviews > Disable Cache setting Knowledge base: Disabled due to Summary by CodeRabbit
WalkthroughThe Add Llm Profile modal updates its content wrapper and submit footer styling. The form now uses a dedicated scroll-root class, and the submit area is styled as a sticky footer with a matching background, border, and spacing. ChangesAdd Llm Profile sticky footer
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
| Filename | Overview |
|---|---|
| frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css | Adds scoped overflow override and sticky footer styles; specificity via double-class selector is correct and won't bleed to other consumers of .settings-body-pad-top |
| frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx | Adds two class names and an inline backgroundColor token to the submit Form.Item; change is purely cosmetic layout with no logic impact |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[".conn-modal-col\n(overflow-y: auto, height: 800px)\nReal scroll container"] --> B[".settings-body-pad-top\n(overflow-y: auto → overridden to visible\nvia .add-llm-profile-scroll-root)"]
B --> C["Form fields\n(scroll within .conn-modal-col)"]
B --> D[".add-llm-profile-footer\nForm.Item\n(position: sticky; bottom: 0)\nPins to bottom of .conn-modal-col"]
D --> E["Submit / Update button\nAlways visible"]
style D fill:#d4edda,stroke:#28a745
style A fill:#cce5ff,stroke:#004085
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[".conn-modal-col\n(overflow-y: auto, height: 800px)\nReal scroll container"] --> B[".settings-body-pad-top\n(overflow-y: auto → overridden to visible\nvia .add-llm-profile-scroll-root)"]
B --> C["Form fields\n(scroll within .conn-modal-col)"]
B --> D[".add-llm-profile-footer\nForm.Item\n(position: sticky; bottom: 0)\nPins to bottom of .conn-modal-col"]
D --> E["Submit / Update button\nAlways visible"]
style D fill:#d4edda,stroke:#28a745
style A fill:#cce5ff,stroke:#004085
Reviews (2): Last reviewed commit: "Apply suggestion from @greptile-apps[bot..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css (1)
22-22: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider using a theme token for the border color.
The hardcoded
#f0f0f0matches Ant Design's default light-theme border, but may appear incorrect if the application supports dark themes. If a CSS custom property or Less/Sass variable is available from the design system, prefer that for theme consistency.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css` at line 22, The border color in AddLlmProfile.css is hardcoded to a light-theme value, so replace it with the design system’s theme token or CSS custom property if one is available. Update the border-top styling in the AddLlmProfile component stylesheet to use the shared token source so the border adapts correctly across themes and stays consistent with the rest of the UI.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css`:
- Line 22: The border color in AddLlmProfile.css is hardcoded to a light-theme
value, so replace it with the design system’s theme token or CSS custom property
if one is available. Update the border-top styling in the AddLlmProfile
component stylesheet to use the shared token source so the border adapts
correctly across themes and stays consistent with the rest of the UI.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5370f02b-c32c-4de8-b88d-a2344f496938
📒 Files selected for processing (2)
frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.cssfrontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Signed-off-by: Jaseem Jas <89440144+jaseemjaskp@users.noreply.github.com>
Frontend Lint Report (Biome)✅ All checks passed! No linting or formatting issues found. |
|
1 participant
What
Why
SettingsModalrenders its body as a fixedheight: 800pxrow with scrollable columns (.conn-modal-col { overflow-y: auto }).AddLlmProfileplaced its submit button as the last element in normal flow, not a pinned footer, so a tall form (Advanced Settings expanded) pushed the button below the visible area..settings-body-pad-top) also declaredoverflow-y: autowith no bounded height — a dead nested scroll context that prevented a sticky footer from pinning to the real scroller.How
Form.Itema sticky footer (position: sticky; bottom: 0) with a solid themed background (token.colorBgContainer) and a top border, so it stays pinned at the bottom of the scroll column while fields scroll beneath it.overflow-y: autoback tovisiblefor this form (scoped via a new.add-llm-profile-scroll-rootclass — does not affect other consumers of.settings-body-pad-top).Can this PR break any existing features?
AddLlmProfile(one form component) via new classes; the override targets.settings-body-pad-top.add-llm-profile-scroll-root(both classes) so other settings panels are unaffected. No logic/behavior change — purely layout.Database Migrations
Env Config
Relevant Docs
Related Issues or PRs
Dependencies Versions
Notes on Testing
npm run buildgreen, biome clean.overflow-y: auto+ non-sticky button the footer sits ~321px below the visible scroll bottom (overflowed); with the override + sticky footer it pins to offset 0 (always visible) while scrolling.ManageLlmProfileslist view ("Add New LLM Profile" button) follows the same pattern and could get the same treatment if desired — left out to keep this focused on the reported edit form.Screenshots
Checklist
I have read and understood the Contribution Guidelines.