fix(css): rm overrides for webgui rules #1826

pujitm · 2025-12-09T19:21:19Z

Because these overrides were under-specified (ie didn't apply to third party component css), and because the webgui currently doesn't use css layering, exclusions have been made in the webgui's default-base.css so they apply broadly, rendering these overrides incorrect and unnecessary.

Testing plan:

install the style patch pr plugin from fix(css): rm overrides for webgui rules #1826
manually copy default-base.css to the test server
manually verify styling on eg. registration & update modals

Summary by CodeRabbit

Style
- Updated styling by enabling Nuxt UI theming and streamlining CSS by removing previously customized Unraid-specific UI style overrides. Dialog interactions, button behaviors, and UI element styling have been simplified. Core accessibility features for keyboard navigation and focus states are retained.

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

Because these overrides were underspecified (ie didn't apply to third party component css), and because the webgui currently doesn't use css layering, exclusions have been made in the webgui's default-base.css so they apply broadly, rendering these overrides incorrect and unnecessary.

coderabbitai · 2025-12-09T19:21:42Z

Walkthrough

Enables Nuxt UI framework import in main CSS and removes a large block of Unraid-specific UI style overrides, while retaining accessibility styling, z-index settings, and preflight integration.

Changes

Cohort / File(s)	Change summary
CSS Styling Updates `web/src/assets/main.css`	Uncomments Nuxt UI import; removes extensive Unraid-specific (`.unapi`) style overrides for buttons, dialogs, modals, headings, lists, toggles, and anchor links; preserves accessibility, z-index, iframe, and header-related styles

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Verify that removing .unapi overrides does not regress visual styling or component functionality
Confirm Nuxt UI import is properly enabled and resolves without errors
Check that retained styles (preflight, focus-visible, z-index, header tweaks) remain appropriate for the application

Poem

🐰 Old styles scraped away so clean,
Nuxt UI now takes the scene!
No more overrides to hold us back,
Fresh defaults fill the CSS stack! ✨

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 'fix(css): rm overrides for webgui rules' directly relates to the main change: removing CSS overrides that were not applying correctly to third-party components due to CSS layering issues.
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
Commit unit tests in branch fix/style-patch

📜 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 74df938 and f184711.

📒 Files selected for processing (1)

web/src/assets/main.css (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

web/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Always run pnpm codegen for GraphQL code generation in the web directory

Files:

web/src/assets/main.css

**/*

📄 CodeRabbit inference engine (.cursor/rules/default.mdc)

Never add comments unless they are needed for clarity of function

Files:

web/src/assets/main.css

🧠 Learnings (15)

📓 Common learnings

Learnt from: elibosley
Repo: unraid/api PR: 1101
File: api/src/unraid-api/unraid-file-modifier/modifications/__test__/snapshots/DefaultPageLayout.php.modified.snapshot.php:203-207
Timestamp: 2025-02-03T17:21:26.738Z
Learning: The project uses patches to override existing Unraid pages rather than modifying them directly.

Learnt from: elibosley
Repo: unraid/api PR: 1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: elibosley
Repo: unraid/api PR: 1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

Learnt from: elibosley
Repo: unraid/api PR: 972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: mdatelle
Repo: unraid/api PR: 1106
File: unraid-ui/src/components/index.ts:2-2
Timestamp: 2025-02-04T17:21:39.710Z
Learning: The unraid-ui package is undergoing a major refactoring process, and breaking changes are expected during this transition period.

Learnt from: pujitm
Repo: unraid/api PR: 975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like `TabsList` and `TabsTrigger` used in `web/components/Notifications/TabList.vue` are automatically available without imports.

Learnt from: elibosley
Repo: unraid/api PR: 974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like `LoadingSpinner` in `web/components/Loading/Error.vue` are not necessary.

Learnt from: CR
Repo: unraid/api PR: 0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-11-24T17:52:26.907Z
Learning: Nuxt is set to auto import so some Vue files may need `computed` or `ref` imported explicitly in store files

Learnt from: pujitm
Repo: unraid/api PR: 1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in `web/components` get built as custom elements and prefixed with `unraid-`, making them available as HTML custom elements at runtime.

Learnt from: pujitm
Repo: unraid/api PR: 1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in `web/components` get built as custom elements and prefixed with `unraid-`, making them available as HTML custom elements at runtime.

📚 Learning: 2025-04-02T21:21:29.168Z

Learnt from: elibosley
Repo: unraid/api PR: 1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-02-04T17:21:39.710Z

Learnt from: mdatelle
Repo: unraid/api PR: 1106
File: unraid-ui/src/components/index.ts:2-2
Timestamp: 2025-02-04T17:21:39.710Z
Learning: The unraid-ui package is undergoing a major refactoring process, and breaking changes are expected during this transition period.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-03-13T16:17:21.897Z

Learnt from: elibosley
Repo: unraid/api PR: 1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-07-18T16:13:55.872Z

Learnt from: elibosley
Repo: unraid/api PR: 1522
File: unraid-ui/src/styles/globals.css:172-174
Timestamp: 2025-07-18T16:13:55.872Z
Learning: In Tailwind CSS v4, `--breakpoint-*` is valid syntax within the `theme` directive for defining custom breakpoints. The wildcard pattern allows you to define breakpoints like `--breakpoint-xs`, `--breakpoint-2xl`, etc. Setting `--breakpoint-*: initial` is the documented way to remove default breakpoints. This syntax is specific to Tailwind's theme system and is not subject to standard CSS custom property naming rules.

Applied to files:

web/src/assets/main.css

📚 Learning: 2024-12-17T13:55:42.068Z

Learnt from: elibosley
Repo: unraid/api PR: 972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-07-17T14:09:57.364Z

Learnt from: elibosley
Repo: unraid/api PR: 1522
File: web/components/Modal.vue:0-0
Timestamp: 2025-07-17T14:09:57.364Z
Learning: In Tailwind CSS v4, `outline-hidden` is a valid utility class that applies `outline: 2px solid transparent; outline-offset: 2px;`. It's the recommended replacement for v3's `outline-none` as it preserves accessibility by keeping outlines visible in high-contrast/forced-colors modes while hiding them visually in normal modes. The v4 `outline-none` now only sets `outline-style: none;` which completely removes outlines including for assistive technologies.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-04-25T13:29:07.868Z

Learnt from: elibosley
Repo: unraid/api PR: 1369
File: web/components/Activation/WelcomeModal.ce.vue:40-40
Timestamp: 2025-04-25T13:29:07.868Z
Learning: The `#confirmPassword` selector in the WelcomeModal.ce.vue component is intentionally looking for an element that exists in the Unraid OS login page (.login.php), not within the component itself. This is used as part of a font-size adjustment workaround to handle different CSS between login and authenticated pages.

Applied to files:

web/src/assets/main.css

📚 Learning: 2024-12-09T15:47:29.325Z

Learnt from: pujitm
Repo: unraid/api PR: 975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like `TabsList` and `TabsTrigger` used in `web/components/Notifications/TabList.vue` are automatically available without imports.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-11-24T17:52:26.907Z

Learnt from: CR
Repo: unraid/api PR: 0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-11-24T17:52:26.907Z
Learning: Nuxt is set to auto import so some Vue files may need `computed` or `ref` imported explicitly in store files

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-11-24T17:52:26.908Z

Learnt from: CR
Repo: unraid/api PR: 0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-11-24T17:52:26.908Z
Learning: Applies to **/store/**/*.ts : Ensure Vue reactivity imports like `computed`, `ref`, and `watchEffect` are added to store files even with Nuxt auto-imports enabled

Applied to files:

web/src/assets/main.css

📚 Learning: 2024-12-06T17:38:40.999Z

Learnt from: elibosley
Repo: unraid/api PR: 974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like `LoadingSpinner` in `web/components/Loading/Error.vue` are not necessary.

Applied to files:

web/src/assets/main.css

📚 Learning: 2025-03-14T19:14:10.408Z

Learnt from: pujitm
Repo: unraid/api PR: 1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in `web/components` get built as custom elements and prefixed with `unraid-`, making them available as HTML custom elements at runtime.

Applied to files:

web/src/assets/main.css

📚 Learning: 2024-12-09T15:45:46.492Z

Learnt from: pujitm
Repo: unraid/api PR: 975
File: web/components/Notifications/TabList.vue:1-4
Timestamp: 2024-12-09T15:45:46.492Z
Learning: In our Nuxt.js setup for the `web` project, it's not necessary to explicitly import `computed` from `vue` in Vue components, as it's globally available.

Applied to files:

web/src/assets/main.css

📚 Learning: 2024-12-17T14:59:32.458Z

Learnt from: elibosley
Repo: unraid/api PR: 972
File: web/store/theme.ts:46-49
Timestamp: 2024-12-17T14:59:32.458Z
Learning: In the `web/store/theme.ts` file of the Unraid web application, the header is intentionally designed to have a light background with dark text in dark mode, and a dark background with light text in light mode.

Applied to files:

web/src/assets/main.css

🔇 Additional comments (4)

web/src/assets/main.css (4)

32-35: Verify focus color and scope of keyboard accessibility styling.

The focus-visible outline uses a custom color #ff8c2f and applies only to buttons. Confirm:

This color matches the Unraid brand guidelines (appears to be the orange accent).

Whether other interactive elements (links, inputs, selects, toggles) within .unapi also need explicit focus-visible styling for consistent keyboard navigation UX.

If other form elements lack focus visibility, users relying on keyboard navigation may struggle.

52-87: Verify header banner compatibility does not break responsive design.

Lines 52–87 apply specific background positioning, overflow, and gradient overlays to the header element. Confirm:

These tweaks don't conflict with responsive breakpoints (mobile/tablet/desktop).

The min(30%, 320px) sizing in line 70 scales appropriately on smaller screens.

The z-index stacking (0 for pseudo-element, 1 for children) doesn't interfere with other header content or Nuxt UI components.

These appear to be intentional WebGUI compatibility workarounds, but their impact on responsive layouts should be verified.

10-12: > Likely an incorrect or invalid review comment.

46-49: CSS variable --background-color is not defined in the application codebase.

Line 47 uses var(--background-color) but this custom property is not defined in web/src/assets/main.css or anywhere else in the web directory. This variable must be provided by the parent Unraid WebGUI context since this iframe is embedded externally. Verify this is intentional or define the fallback value.

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

codecov · 2025-12-09T19:27:26Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 52.04%. Comparing base (74df938) to head (f184711).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1826   +/-   ##
=======================================
  Coverage   52.04%   52.04%           
=======================================
  Files         876      876           
  Lines       50509    50509           
  Branches     5023     5023           
=======================================
  Hits        26285    26285           
  Misses      24149    24149           
  Partials       75       75

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

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

github-actions · 2025-12-09T19:28:00Z

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR1826/dynamix.unraid.net.plg

elibosley · 2025-12-17T18:37:32Z

@pujitm let's get this merged.

coderabbitai bot approved these changes Dec 9, 2025

View reviewed changes

elibosley approved these changes Dec 17, 2025

View reviewed changes

elibosley marked this pull request as draft December 18, 2025 15:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(css): rm overrides for webgui rules #1826

fix(css): rm overrides for webgui rules #1826

Uh oh!

pujitm commented Dec 9, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

codecov bot commented Dec 9, 2025

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

elibosley commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(css): rm overrides for webgui rules #1826

Are you sure you want to change the base?

fix(css): rm overrides for webgui rules #1826

Uh oh!

Conversation

pujitm commented Dec 9, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

codecov bot commented Dec 9, 2025

Codecov Report

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

elibosley commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pujitm commented Dec 9, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 9, 2025 •

edited

Loading