From 6af06c5f110d664c578662eca28db1b92ab06bac Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 26 Mar 2026 17:41:42 +0100 Subject: [PATCH] fix(custom-widths): Update selectors and style to fix broken custom chats and chatbox widths --- entrypoints/content.js | 64 +++++++++--------- styles/elements/_right--main.scss | 27 ++++++-- styles/elements/_right--textarea.scss | 5 +- styles/index.scss | 2 +- wxt.config.ts | 96 +++++++++++++++------------ 5 files changed, 109 insertions(+), 85 deletions(-) diff --git a/entrypoints/content.js b/entrypoints/content.js index 501d66d..41d4d6e 100644 --- a/entrypoints/content.js +++ b/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 } */ diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss index a405bcb..7f8460d 100644 --- a/styles/elements/_right--main.scss +++ b/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; -} \ No newline at end of file +} diff --git a/styles/elements/_right--textarea.scss b/styles/elements/_right--textarea.scss index 110763d..7f76a57 100644 --- a/styles/elements/_right--textarea.scss +++ b/styles/elements/_right--textarea.scss @@ -115,7 +115,8 @@ /* 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 */ @@ -123,4 +124,4 @@ // border: 1px solid var(--dsw-alias-border-l2-darkmode-thin); // color: var(--dsw-alias-label-primary); // background-color: var(--dsw-alias-button-floating-fill); -// } \ No newline at end of file +// } diff --git a/styles/index.scss b/styles/index.scss index c17f637..41043c7 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -37,4 +37,4 @@ @import 'customs/_custom-toggles'; -@import 'deepstyled/index'; \ No newline at end of file +@import 'deepstyled/index'; diff --git a/wxt.config.ts b/wxt.config.ts index 524e065..49fb0e7 100644 --- a/wxt.config.ts +++ b/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', + }, + }, + }), + }), })