Fix broken custom chats/chatbox widths feature

entrypoints/content.js

@@ -7,44 +7,44 @@ import { useThemeManager } from '@/composables/useThemeManager'
 import { createIntegratedUi, defineContentScript } from '#imports'
 
 export default defineContentScript({
-	matches: ['*://chat.deepseek.com/*'],
-	// cssInjectionMode: 'manifest', // Ensure CSS is handled correctly
-	async main(ctx) {
-		// content.js - runs before page scripts
-		// DEV__CLEAR_DEFAULT_VENDORS_CONSOLE_CLEARING()
+  matches: ['*://chat.deepseek.com/*'],
+  // cssInjectionMode: 'manifest', // Ensure CSS is handled correctly
+  async main(ctx) {
+    // content.js - runs before page scripts
+    // DEV__CLEAR_DEFAULT_VENDORS_CONSOLE_CLEARING()
 
-		// Force theme initialization before the UI mounts.
-		useThemeManager()
+    // Force theme initialization before the UI mounts.
+    useThemeManager()
 
-		// Use the integrated UI API provided by wxt-dev
-		const ui = createIntegratedUi(ctx, {
-			position: 'inline',
-			anchor: 'body',
-			onMount: (container) => {
-				// Create and mount the Vue 3 app with the ThemeManager component
-				const app = createApp(ThemeManager)
-				app.mount(container)
+    // Use the integrated UI API provided by wxt-dev
+    const ui = createIntegratedUi(ctx, {
+      position: 'inline',
+      anchor: 'body',
+      onMount: (container) => {
+        // Create and mount the Vue 3 app with the ThemeManager component
+        const app = createApp(ThemeManager)
+        app.mount(container)
 
-				// console.log('getAllStorageItems: ', getAllStorageItems())
+        // console.log('getAllStorageItems: ', getAllStorageItems())
 
-				return app
-			},
-			onRemove: (app) => {
-				// Cleanly unmount the Vue app when the UI is removed
-				app.unmount()
-			},
-		})
-		// Finally, add the UI to the page
-		ui.mount()
-	},
+        return app
+      },
+      onRemove: (app) => {
+        // Cleanly unmount the Vue app when the UI is removed
+        app.unmount()
+      },
+    })
+    // Finally, add the UI to the page
+    ui.mount()
+  },
 })
 
 /* function DEV__CLEAR_DEFAULT_VENDORS_CONSOLE_CLEARING() {
-	// Find the highest interval ID and nuke them all
-	const maxIntervalId = setTimeout(() => {}, 0)
-	for (let i = 1; i <= maxIntervalId; i++) {
-		clearInterval(i)
-	}
-	clearTimeout(maxIntervalId) // Clean up the one we just made
+  // Find the highest interval ID and nuke them all
+  const maxIntervalId = setTimeout(() => {}, 0)
+  for (let i = 1; i <= maxIntervalId; i++) {
+    clearInterval(i)
+  }
+  clearTimeout(maxIntervalId) // Clean up the one we just made
 }
  */

styles/elements/_right--main.scss

@@ -34,9 +34,9 @@
 ._9663006 {
     /*  Gap on top from GPT user bubble: sum of:
         16px - this ._9663006 mb
-        28px - user footer icons height, 
+        28px - user footer icons height,
         6px - user footer icons mt  */
-    // margin-top: calc(16px + 28px + 6px) !important; // 
+    // margin-top: calc(16px + 28px + 6px) !important; //
 
     /* User chat bubble in edit state */
     &._3111eee {
@@ -235,14 +235,29 @@
     }
 }
 
-/* Chats list parent */
-.dad65929 {
+/* Chats list parent - NOT EXIST ANYMORE (2026-03-26) ?  */
+/* .dad65929 {
     // --message-list-max-width: 800px;
     // --message-list-max-width: var(--maxWidthChats) !important;
     margin: 0 auto !important; // very important because sometimes chats are very small width??? and also, in some scenarios they arent centered ??
     width: 100%; // very important because sometimes chats are very small width???
     max-width: var(--maxWidthChats) !important;
     // width: var(--maxWidthChats) !important; // nah, this makes chats to overflow in some case scenarios so width: 100% fix it??
+} */
+
+/* Chats list and chatbox wrapper */
+.ds-virtual-list-items {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin: 0 16px !important;
+
+    /* Chatlist wrapper */
+    .ds-virtual-list-visible-items {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin: 0 auto !important;
+        max-width: var(--maxWidthChats) !important;
+    }
 }
 
 /* Chatbox and textarea wrapper parent */
@@ -259,7 +274,7 @@
 
 /* ============ CUSTOM FONTS ============  */
 
-/* 
+/*
     .fbb737a4 - user chat bubble
     ._4f9bf79 - gpt chat bubble
     .ds-markdown - markdown
@@ -294,4 +309,4 @@
 /* User and AI chat selection mode (when in sharing/selecting chat mode). _6e8caf5 is for selected state class */
 ._6e8caf5._7729a77:before {
     box-shadow: 0 0 0 3px hsla(var(--accent-hsl) / 0.5) !important;
-}
+}

styles/elements/_right--textarea.scss

@@ -115,12 +115,13 @@
 
 /* Very top parent of chatbox with child that have black gradient and strange width */
 ._871cbca {
-    margin: auto 0 !important; // original: margin: auto 32px 0 !important;
+    /* margin: auto 0 !important; // original: margin: auto 32px 0 !important; */
+    padding: 0 !important;
 }
 
 /* Scrolldown btn  */
 // ._090c426._00d3b42, ._090c426._6894dc3 {
 //     border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
 //     color: var(--dsw-alias-label-primary);
 //     background-color: var(--dsw-alias-button-floating-fill);
-// }
+// }

styles/index.scss

@@ -37,4 +37,4 @@
 
 @import 'customs/_custom-toggles';
 
-@import 'deepstyled/index';
+@import 'deepstyled/index';

wxt.config.ts

@@ -3,48 +3,56 @@ import { resolve } from 'path'
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-	modules: ['@wxt-dev/module-vue', '@wxt-dev/auto-icons'],
-	autoIcons: {
-		enabled: true,
-		developmentIndicator: false,
-		sizes: [128, 48, 32, 16],
-	},
-	vite: () => ({
-		resolve: {
-			alias: {
-				'@': resolve('/'),
-				'~': resolve('/'),
-			},
-		},
-		logLevel: 'error', // Suppress warnings
-		css: {
-			preprocessorOptions: {
-				scss: {
-					api: 'modern-compiler',
-					quietDeps: true,
-					silenceDeprecations: ['import'],
-					additionalData: `@import "@/styles/shared.scss";`, // 👈 Auto-import SCSS
-				},
-			},
-		},
-	}),
-	// manifestVersion: 3,
-	manifest: ({ browser }) => ({
-		name: 'DeepStyled - Deepseek Customization',
-		author: 'itsmarta',
-		homepage_url: 'https://github.com/itsmartashub/DeepStyled',
-		permissions: ['storage'],
-		host_permissions: ['https://chat.deepseek.com/*'],
-		content_security_policy: {
-			extension_pages:
-				"script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; object-src 'self';",
-		},
-		...(browser === 'firefox' && {
-			applications: {
-				gecko: {
-					id: 'deepstyled@itsmarta',
-				},
-			},
-		}),
-	}),
+  modules: ['@wxt-dev/module-vue', '@wxt-dev/auto-icons'],
+  // Override default chrome browser to Brave
+  webExt: {
+    disabled: false,
+    // Manually point to my Brave exe
+    binaries: {
+      chrome: 'C:/Program Files/BraveSoftware/Brave-Browser-Beta/Application/brave.exe', // Change path for Mac/Linux
+    },
+  },
+  autoIcons: {
+    enabled: true,
+    developmentIndicator: false,
+    sizes: [128, 48, 32, 16],
+  },
+  vite: () => ({
+    resolve: {
+      alias: {
+        '@': resolve('/'),
+        '~': resolve('/'),
+      },
+    },
+    logLevel: 'error', // Suppress warnings
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+          quietDeps: true,
+          silenceDeprecations: ['import'],
+          additionalData: `@import "@/styles/shared.scss";`, // 👈 Auto-import SCSS
+        },
+      },
+    },
+  }),
+  // manifestVersion: 3,
+  manifest: ({ browser }) => ({
+    name: 'DeepStyled - Deepseek Customization',
+    author: 'itsmarta',
+    homepage_url: 'https://github.com/itsmartashub/DeepStyled',
+    permissions: ['storage'],
+    host_permissions: ['https://chat.deepseek.com/*'],
+    content_security_policy: {
+      extension_pages:
+        "script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; object-src 'self';",
+    },
+    ...(browser === 'firefox' && {
+      applications: {
+        gecko: {
+          id: 'deepstyled@itsmarta',
+        },
+      },
+    }),
+  }),
 })