fix(styles): update paragraph styling to exclude unapi elements

[Ajit-Mehrotra]

Purpose

The paragraph styles in webgui are conflicting with api styles.

Please Note

These changes are not ready to be merged yet. Please coordinate with the API team.

@elibosley

Summary by CodeRabbit

• Bug Fixes
  • Refined text justification behavior to prevent unintended formatting in specific UI areas, improving text display consistency across the interface.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A CSS styling modification that narrows the scope of text justification for paragraph elements by excluding content within .unapi containers, using the :where(:not(.unapi *)) selector to prevent justification from affecting unraid/unapi content.

Changes

Cohort / File(s)	Summary
CSS Styling Adjustment emhttp/plugins/dynamix/styles/default-base.css	Replaced global paragraph text-alignment rule with scoped selector to exclude .unapi descendant elements; minor end-of-file formatting applied.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file, CSS-only modification
• Clear and straightforward selector change with documented intent
• No logic changes or complex interactions to verify

Poem

🐰 A hop through the styles, precise and neat,
Where paragraphs align to a measured beat,
But unapi lands get their rightful space—
No justification cramping their place!
Our CSS whiskers twitch with glee,
Scope and intent in harmony! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: updating paragraph styling to exclude unapi elements, which directly reflects the CSS modification made to restrict text justification outside of unapi content.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d0e94e4 and e29f281.

📒 Files selected for processing (1)

• emhttp/plugins/dynamix/styles/default-base.css (2 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: zackspear
Repo: unraid/webgui PR: 0
File: :0-0
Timestamp: 2025-05-31T00:04:34.204Z
Learning: For the unraid/webgui legacy codebase, ARIA labels and accessibility concerns should not be addressed in individual PRs. These will be handled via a different solution in the future.

Learnt from: zackspear
Repo: unraid/webgui PR: 0
File: :0-0
Timestamp: 2025-05-28T20:54:31.390Z
Learning: In the unraid/webgui repository, the CSS rule `div.title.ud, div#title.ud { margin-top: 0 !important; }` uses `!important` specifically to override CSS that's added by a plugin, which is a necessary approach for ensuring proper title positioning and preventing overlap with tabs.

📚 Learning: 2025-05-28T20:54:31.390Z

Learnt from: zackspear
Repo: unraid/webgui PR: 0
File: :0-0
Timestamp: 2025-05-28T20:54:31.390Z
Learning: In the unraid/webgui repository, the CSS rule `div.title.ud, div#title.ud { margin-top: 0 !important; }` uses `!important` specifically to override CSS that's added by a plugin, which is a necessary approach for ensuring proper title positioning and preventing overlap with tabs.

Applied to files:

• emhttp/plugins/dynamix/styles/default-base.css

📚 Learning: 2025-06-21T00:10:40.789Z

Learnt from: zackspear
Repo: unraid/webgui PR: 2258
File: emhttp/plugins/dynamix/DashStats.page:0-0
Timestamp: 2025-06-21T00:10:40.789Z
Learning: In the Unraid webgui codebase (emhttp/plugins/dynamix), replacing `<i>` elements with `<button>` elements for accessibility would require extensive CSS refactoring due to legacy CSS having direct button styles that would conflict with icon-based toggles.

Applied to files:

• emhttp/plugins/dynamix/styles/default-base.css

🔇 Additional comments (2)

emhttp/plugins/dynamix/styles/default-base.css (2)

2792-2792: Formatting change only.

This appears to be a minor trailing formatting adjustment with no functional impact.

---

25-27: LGTM! The scoping approach is sound and follows existing patterns.

The use of :where(:not(.unapi *)) correctly excludes text justification from paragraphs within .unapi containers while maintaining zero specificity. This is consistent with the pattern already established throughout the file for inputs, buttons, selects, tables, and textareas.

Consider whether the other global p selectors at lines 43-49 with :has() rules for margin removal also need similar scoping to prevent affecting .unapi content.

---

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 and usage tips.}

[github-actions]

🔧 PR Test Plugin Available

A test plugin has been generated for this PR that includes the modified files.

Version: 2025.12.15.2341
Build: View Workflow Run

📥 Installation Instructions:

Install via Unraid Web UI:

1. Go to Plugins → Install Plugin
2. Copy and paste this URL:

https://preview.dl.unraid.net/pr-plugins/pr-2486/webgui-pr-2486.plg

3. Click Install

Alternative: Direct Download

• 📦 Download PLG
• 📦 Download TXZ

⚠️ Important Notes:

• Testing only: This plugin is for testing PR changes
• Backup included: Original files are automatically backed up
• Easy removal: Files are restored when plugin is removed
• Conflicts: Remove this plugin before installing production updates

📝 Modified Files:

Click to expand file list

emhttp/plugins/dynamix/styles/default-base.css

🔄 To Remove:

Navigate to Plugins → Installed Plugins and remove webgui-pr-2486, or run:

plugin remove webgui-pr-2486

---

_{🤖 This comment is automatically generated and will be updated with each new push to this PR.}