fix(frontend): anchor alert notifications flush to bottom corner

[keval718]

Summary

Error/notice/success alerts floated ~80px above the bottom-left corner, leaving a large empty gap beneath them. The global alert container (.app-div in applies.css) used bottom-20 left-5; this changes it to bottom-4 left-4 so alerts sit flush in the corner.

Why

bottom-20 was introduced in #11636 (Langflow Assistant panel) as clearance for a bottom-left trigger that no longer exists — canvas controls are bottom-center and the assistant is a side panel, so nothing anchors bottom-left today. The offset survived as dead space.

bottom-4 left-4 matches the Playground page's own alert mount (fixed bottom-4 left-4 in src/pages/Playground/index.tsx), so both alert surfaces now share the same corner placement.

Scope / blast radius

.app-div has exactly one consumer: the AlertDisplayArea wrapper in AppWrapperPage. No other element uses the class, and no floating UI occupies the bottom-left corner, so there is no overlap risk.

Validation

• npx jest src/alerts — 4/4 pass
• Grep audit: single .app-div usage; canvas controls confirmed bottom-center

Screenshots

before

After

Summary by CodeRabbit

• Style
  • Adjusted the app panel positioning to sit closer to the bottom-left corner.
  • Improved consistency of the panel’s spacing within the layout.

[coderabbitai]

Walkthrough

The .app-div positioning offsets in the frontend stylesheet change from bottom-20 left-5 to bottom-4 left-4.

Changes

App positioning

Layer / File(s)	Summary
Update positioning offsets src/frontend/src/style/applies.css	The .app-div @apply declaration uses smaller bottom and left offsets.

Estimated code review effort: 1 (Trivial) | ~2 minutes

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	The PR only changes applies.css; no test files are added or updated, and existing alert tests cover semantics/content, not positioning.	Add a frontend regression test in a *.test.tsx file that asserts the alert wrapper uses the new bottom-4/left-4 placement (or equivalent DOM/class coverage).
Test Quality And Coverage	⚠️ Warning	Existing alert tests only cover a11y/content; they never assert the changed .app-div positioning or page-level mount points.	Add a frontend test that asserts the wrapper/mount uses the new bottom-4 left-4 placement (or equivalent snapshot/class test) for AppWrapperPage/Playground.

✅ Passed checks (7 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Test File Naming And Structure	✅ Passed	Only src/frontend/src/style/applies.css changed; no test files were added or modified, so the test naming/structure checklist is not applicable.
Excessive Mock Usage Warning	✅ Passed	PR only changes CSS; no test files were modified, so there’s no mock-heavy test code to assess.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: repositioning frontend alert notifications flush to the bottom corner.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/alert-display-bottom-gap

---

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

[github-actions]

✅ Test Coverage Advisor

No source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉

Advisory check only — never blocks merge.

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	45.73% (63206/138196)	69.88% (8608/12318)	43.85% (1425/3249)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
5270	0 💤	0 ❌	0 🔥	15m 43s ⏱️

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.89%. Comparing base (ccdb7c7) to head (5433c27).
⚠️ Report is 19 commits behind head on release-1.11.0.

Additional details and impacted files

@@                Coverage Diff                 @@
##           release-1.11.0   #14027      +/-   ##
==================================================
- Coverage           59.99%   59.89%   -0.10%     
==================================================
  Files                2389     2390       +1     
  Lines              230242   230279      +37     
  Branches            34463    34534      +71     
==================================================
- Hits               138125   137920     -205     
- Misses              90501    90743     +242     
  Partials             1616     1616              

Flag	Coverage Δ
frontend	59.30% <ø> (-0.16%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 38 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Cristhianzl]

lgtm