fix(front): make notifications page span full width

[HsukqiLee]

📌 Description

The notifications page content does not span the full width, unlike the other Monitoring pages (#1762). Root cause: the page wrapper #notifications is a flex container (front/css/app.css), so its child <section class="content table-responsive"> is a flex item and shrinks to its content width instead of stretching like on the other pages.

This adds a scoped rule stretching the content section to the wrapper's full width:

#notifications .content
{
    width: 100%;
}

Skeleton check requested in the issue: #notifications-skeleton is absolutely positioned with left: 0; right: 0 (plus the same margin: 15px used by the other pages' skeletons), so it already covers the full page width during load and is unaffected by this change.

---

🔍 Related Issues

fixes #1762

---

📋 Type of Change

• 🐛 Bug fix
• ✨ New feature
• ♻️ Code refactor
• 📚 Documentation update
• 🧪 Test addition or change
• 🔧 Build/config update
• 🚀 Performance improvement
• 🔨 CI/CD or automation
• 🧹 Cleanup / chore

---

📷 Screenshots or Logs (if applicable)

CSS-only change; the notifications table/box now stretches to the wrapper width, matching e.g. the Events/Presence pages.

---

🧪 Testing Steps

• Inspected the layout rules: #notifications { display: flex } makes section.content a shrink-to-fit flex item; adding width: 100% restores full width. The skeleton overlay uses position: absolute; left: 0; right: 0, so it remains full width during loading.
• The change is scoped to #notifications .content only; no other page uses this selector.
• I could not run the Selenium UI suite (test/ui/test_ui_notifications.py) locally as it requires a running instance; happy to adjust if CI/maintainer testing shows anything.

---

✅ Checklist

• I have read the Contribution Guidelines
• I have tested my changes locally
• I have updated relevant documentation (if applicable)
• I have verified my changes do not break existing behavior
• If this PR adds/modifies a plugin, it passes the Conventions Checklist
• I am willing to respond to requested changes and feedback

---

🙋 Additional Notes

If you would prefer removing display: flex from #notifications entirely instead of stretching the child, I am happy to rework — I kept the flex container in place to avoid disturbing the skeleton/spinner overlay behavior.

Summary by CodeRabbit

• Style
  • Updated the Notifications page layout so its content spans the full available width, consistent with other Monitoring pages.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 2c225576-7e05-4e83-8d61-89c9f885fbc8

📥 Commits

Reviewing files that changed from the base of the PR and between 6916b06 and dced246.

📒 Files selected for processing (1)

• front/css/app.css

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The stylesheet adds a full-width rule for the notifications content section inside its flex container.

Changes

Notifications layout

Layer / File(s)	Summary
Set notifications content width front/css/app.css	The #notifications .content rule sets width: 100%.

Suggested reviewers: jokob-sk

Merge Risk: ⚪ Minimal · up to dced2

Notifications content now fills the available page width as intended, with no identified merge-readiness risk.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: making the notifications page span the full width.
Linked Issues check	✅ Passed	The CSS rule sets #notifications .content to width: 100%, which directly addresses issue #1762 and makes the notification window occupy the full available width.
Out of Scope Changes check	✅ Passed	The pull request contains only the scoped CSS change required to fix the notifications page width. No unrelated changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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