fix: update theme handling and improve CSS styles for preview component

Author: mikr13

.changeset/sparkly-tools-trade.md

@@ -0,0 +1,5 @@
+---
+"superfill.ai": patch
+---
+
+fix: update theme handling and improve CSS styles for preview component

src/assets/globals.css

@@ -211,7 +211,7 @@
 }
 
 @layer base {
-  * {
+  *:not(:host) {
     @apply border-border outline-ring/50;
   }
 

src/entrypoints/content/components/preview-manager.tsx

@@ -22,6 +22,7 @@ import type {
   PreviewSidebarPayload,
 } from "@/types/autofill";
 import type { FilledField, FormMapping, MemoryEntry } from "@/types/memory";
+import { Theme } from "@/types/theme";
 import { AutofillContainer } from "./autofill-container";
 
 const logger = createLogger("preview-manager");
@@ -456,12 +457,6 @@ export class PreviewSidebarManager {
 
         const mountPoint = document.createElement("div");
         mountPoint.id = "superfill-autofill-preview-root";
-        mountPoint.style.cssText = `
-          width: 100%;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-        `;
         uiContainer.append(mountPoint);
 
         const root = createRoot(mountPoint);
@@ -471,7 +466,17 @@ export class PreviewSidebarManager {
         (async () => {
           const uiSettings = await storage.uiSettings.getValue();
 
-          uiContainer.classList.add(uiSettings.theme);
+          host.classList.remove("light", "dark");
+          if (uiSettings.theme === Theme.LIGHT) {
+            host.classList.add("light");
+          } else if (uiSettings.theme === Theme.DARK) {
+            host.classList.add("dark");
+          } else {
+            const isDarkMode =
+              document.documentElement.classList.contains("dark") ||
+              window.matchMedia("(prefers-color-scheme: dark)").matches;
+            host.classList.add(isDarkMode ? "dark" : "light");
+          }
         })();
 
         return root;

src/entrypoints/content/content.css

@@ -2,6 +2,7 @@
 @import "~/assets/globals.css";
 
 :host {
+  all: initial !important;
   position: fixed !important;
   top: 0 !important;
   right: 0 !important;
@@ -12,7 +13,11 @@
   z-index: 2147483646 !important;
   pointer-events: none !important;
   overflow: visible !important;
-  font-family: var(--font-sans, "Outfit", sans-serif);
+  font-family: var(--font-sans, "Outfit", sans-serif) !important;
+  font-size: 16px !important;
+  line-height: 1.5 !important;
+  color: initial !important;
+  box-sizing: border-box !important;
 }
 
 :host([data-ui-type="preview"]) {
@@ -49,18 +54,41 @@
   pointer-events: none !important;
 }
 
+:host > div {
+  box-sizing: border-box !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  display: block !important;
+  overflow: hidden !important;
+}
+
 html,
 body {
   position: static !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
+  box-sizing: border-box !important;
   width: 100% !important;
   height: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
-  overflow: visible !important;
+  overflow: hidden !important;
+}
+
+#superfill-autofill-preview-root {
+  box-sizing: border-box !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  position: relative !important;
 }
 
 /* From Uiverse.io by andrew-manzyk */