From ce67257526e00a69265589eed2470130c0159158 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Sat, 30 Aug 2025 22:19:17 -0400
Subject: [PATCH] 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.
---
 web/assets/main.css                     | 35 ++++++++++++++++---------
 web/components/Wrapper/vue-mount-app.ts | 14 +++++++---
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/web/assets/main.css b/web/assets/main.css
index 6c98f5d40..d1d1b1fb3 100644
--- a/web/assets/main.css
+++ b/web/assets/main.css
@@ -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 */
diff --git a/web/components/Wrapper/vue-mount-app.ts b/web/components/Wrapper/vue-mount-app.ts
index 549b5d4b0..bd330c235 100644
--- a/web/components/Wrapper/vue-mount-app.ts
+++ b/web/components/Wrapper/vue-mount-app.ts
@@ -256,13 +256,19 @@ export function getMountedApp(appId: string): VueApp | undefined {
 
 // Auto-mount function for script tags
 export function autoMountComponent(component: Component, selector: string, options?: Partial<MountOptions>) {
+  const tryMount = () => {
+    // Check if elements exist before attempting to mount
+    if (document.querySelector(selector)) {
+      mountVueApp({ component, selector, ...options });
+    }
+    // Silently skip if no elements found - this is expected for most components
+  };
+
   // Wait for DOM to be ready
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      mountVueApp({ component, selector, ...options });
-    });
+    document.addEventListener('DOMContentLoaded', tryMount);
   } else {
     // DOM is already ready
-    mountVueApp({ component, selector, ...options });
+    tryMount();
   }
 }