style: add unraid-reset class and CSS rules for component styling

- Introduced a new CSS class `.unraid-reset` to reset inherited styles for Unraid components, ensuring consistent styling across the application.
- Updated `vue-mount-app.ts` to apply the `.unraid-reset` class to mount targets, preventing webgui styles from leaking into Unraid components.

web/assets/main.css

@@ -7,3 +7,36 @@
 @source "../../unraid-ui/dist/**/*.{js,mjs}";
 @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;
+  
+  /* Restore essential display properties */
+  display: revert;
+  box-sizing: border-box;
+  
+  /* Ensure text is visible */
+  color: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+/* Specific resets for interactive elements to restore functionality */
+.unraid-reset button,
+.unraid-reset input,
+.unraid-reset select,
+.unraid-reset textarea {
+  cursor: revert;
+}
+
+.unraid-reset a {
+  cursor: pointer;
+  text-decoration: revert;
+}
+
+.unraid-reset [hidden] {
+  display: none !important;
+}

web/components/Wrapper/vue-mount-app.ts

@@ -123,6 +123,9 @@ export function mountVueApp(options: MountOptions): VueApp | null {
   targets.forEach((target) => {
     const mountTarget = target as HTMLElement;
     
+    // Add unraid-reset class to ensure webgui styles don't leak in
+    mountTarget.classList.add('unraid-reset');
+    
     if (useShadowRoot) {
       // Create shadow root if needed
       if (!mountTarget.shadowRoot) {