refactor: enhance CSS reset and improve Vue app mounting logic

- Updated the `.unraid-reset` class in `main.css` to include additional properties for better styling consistency across Unraid components.
- Refined the `autoMountComponent` function in `vue-mount-app.ts` to check for element existence before mounting, improving robustness and preventing errors during the mounting process.
This commit is contained in:
Eli Bosley
2025-08-30 22:19:17 -04:00
parent 4a39cd9862
commit ce67257526
2 changed files with 33 additions and 16 deletions
+23 -12
View File
@@ -8,20 +8,31 @@
@source "../../unraid-ui/src/**/*.{vue,ts}";
@source "../**/*.{vue,ts,js}";
/* Reset all inherited styles from webgui for Unraid components */
.unraid-reset,
.unraid-reset * {
/* Reset all inherited properties to initial values */
all: unset;
/* Reset inherited styles from webgui for Unraid components */
.unraid-reset {
/* Create a new stacking context */
isolation: isolate;
/* Restore essential display properties */
display: revert;
/* Reset text and spacing properties that commonly leak from webgui */
font-size: 1rem;
font-weight: normal;
text-align: left;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
/* Reset box model */
margin: 0;
padding: 0;
border: 0;
/* Ensure proper box sizing */
box-sizing: border-box;
}
.unraid-reset * {
/* Ensure all children use border-box */
box-sizing: border-box;
/* Ensure text is visible */
color: inherit;
font-family: inherit;
line-height: inherit;
}
/* Specific resets for interactive elements to restore functionality */