UN-3185: Pin LLM profile form submit button as a sticky footer

[jaseemjaskp]

What

• Fix the Update / Add button overflowing the prompt-studio Settings → LLM Profile add/edit form (most visible with Advanced Settings expanded — the button flowed past the modal's visible area instead of staying pinned).

Why

• SettingsModal renders its body as a fixed height: 800px row with scrollable columns (.conn-modal-col { overflow-y: auto }). AddLlmProfile placed 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.
• The form root (.settings-body-pad-top) also declared overflow-y: auto with no bounded height — a dead nested scroll context that prevented a sticky footer from pinning to the real scroller.

How

• Make the submit Form.Item a 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.
• Override the dead nested overflow-y: auto back to visible for this form (scoped via a new .add-llm-profile-scroll-root class — does not affect other consumers of .settings-body-pad-top).

Can this PR break any existing features?

• No. Changes are scoped to 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

• None.

Env Config

• None.

Relevant Docs

• None.

Related Issues or PRs

• UN-3185. Separate from the perf PR (UN-3185: Defer heavy chunks on login route + cache fingerprinted assets #2114, merged) and the loader-spinner fix (UN-3185: Fix squished route-loading spinner in the content area #2118). This is a pre-existing layout issue, not a regression from those.

Dependencies Versions

• None.

Notes on Testing

• npm run build green, biome clean.
• Verified the sticky pinning against the real CSS rules in-browser: with the nested 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.
• Note: the ManageLlmProfiles list 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.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce315518-8a3c-4c27-b9ac-bfecdec1fd73

📥 Commits

Reviewing files that changed from the base of the PR and between 8357586 and ea946a1.

📒 Files selected for processing (1)

• frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css

Cache: Disabled due to Reviews > Disable Cache setting

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

---

Summary by CodeRabbit

• Bug Fixes
  • Improved scrolling in the “Add LLM Profile” modal so the footer stays visible and the form layout behaves more reliably as content grows.
  • Updated the bottom action area to remain pinned within the panel, reducing layout and sticky-positioning issues in longer forms.

Walkthrough

The 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.

Changes

Add Llm Profile sticky footer

Layer / File(s)	Summary
Scroll root and sticky footer frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx, frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css	The form wrapper gains a dedicated scroll-root class and the submit footer gains sticky bottom styling with a matching background, border, and spacing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly states the main change: pinning the LLM profile submit button as a sticky footer.
Description check	✅ Passed	The description follows the template and covers what, why, how, breakage, migrations, config, testing, and related issues.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch UN-3185-llm-profile-footer-fix

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

This PR fixes a layout bug in the AddLlmProfile form where the submit button overflows below the visible area of the settings modal when Advanced Settings is expanded. The fix uses CSS position: sticky to pin the footer button, combined with an overflow: visible override scoped to this form to remove the dead nested scroll context that would otherwise prevent sticky positioning from working.

• AddLlmProfile.css: Adds two new rules — .settings-body-pad-top.add-llm-profile-scroll-root to neutralize the conflicting overflow-y: auto from the shared .settings-body-pad-top rule (without affecting other consumers), and .add-llm-profile-footer with position: sticky; bottom: 0 to pin the submit area.
• AddLlmProfile.jsx: Adds the add-llm-profile-scroll-root class to the root wrapper and the add-llm-profile-footer class plus an inline backgroundColor (sourced from the Ant Design theme token) to the submit Form.Item.

Confidence Score: 5/5

Safe to merge — purely a CSS layout fix scoped to one form via double-class selectors, with no logic changes.

The change is limited to two files and introduces no new logic. The overflow override is correctly scoped using a combined double-class selector so it cannot affect other consumers of .settings-body-pad-top. The sticky footer approach is a standard CSS pattern and works correctly with the parent scroll container.

No files require special attention.

Important Files Changed

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

Loading

%%{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

Loading

_{Reviews (2): Last reviewed commit: "Apply suggestion from @greptile-apps[bot..." | Re-trigger Greptile}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css (1)

22-22: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider using a theme token for the border color.

The hardcoded #f0f0f0 matches 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

📥 Commits

Reviewing files that changed from the base of the PR and between b13e5bd and 8357586.

📒 Files selected for processing (2)

• frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.css
• frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx

[github-actions]

Frontend Lint Report (Biome)

✅ All checks passed! No linting or formatting issues found.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud