From acf505796ba37317647db2ad8412ad3350fe6988 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 6 Sep 2025 21:14:53 +0200
Subject: [PATCH 1/4] feat(popup): Add recommendation info for GPThemes
 extension

---
 components/Icons/Chrome.vue                   |  21 ++++
 components/Icons/Firefox.vue                  |  20 ++++
 components/PillChip.vue                       |  13 +--
 entrypoints/popup/App.vue                     |   4 +-
 entrypoints/popup/components/Header.vue       |   4 +-
 entrypoints/popup/components/PopupImage.vue   |   2 +-
 .../popup/components/Recommendation.vue       | 102 ++++++++++++++++++
 entrypoints/popup/style.scss                  |  24 +++--
 styles/abstract/_root.scss                    |   2 +
 9 files changed, 174 insertions(+), 18 deletions(-)
 create mode 100644 components/Icons/Chrome.vue
 create mode 100644 components/Icons/Firefox.vue
 create mode 100644 entrypoints/popup/components/Recommendation.vue

diff --git a/components/Icons/Chrome.vue b/components/Icons/Chrome.vue
new file mode 100644
index 0000000..24d4bc2
--- /dev/null
+++ b/components/Icons/Chrome.vue
@@ -0,0 +1,21 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-brand-chrome"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+		<path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+		<path d="M12 9h8.4" />
+		<path d="M14.598 13.5l-4.2 7.275" />
+		<path d="M9.402 13.5l-4.2 -7.275" />
+	</svg>
+</template>
diff --git a/components/Icons/Firefox.vue b/components/Icons/Firefox.vue
new file mode 100644
index 0000000..c6e7aa2
--- /dev/null
+++ b/components/Icons/Firefox.vue
@@ -0,0 +1,20 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-brand-firefox"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path d="M4.028 7.82a9 9 0 1 0 12.823 -3.4c-1.636 -1.02 -3.064 -1.02 -4.851 -1.02h-1.647" />
+		<path
+			d="M4.914 9.485c-1.756 -1.569 -.805 -5.38 .109 -6.17c.086 .896 .585 1.208 1.111 1.685c.88 -.275 1.313 -.282 1.867 0c.82 -.91 1.694 -2.354 2.628 -2.093c-1.082 1.741 -.07 3.733 1.371 4.173c-.17 .975 -1.484 1.913 -2.76 2.686c-1.296 .938 -.722 1.85 0 2.234c.949 .506 3.611 -1 4.545 .354c-1.698 .102 -1.536 3.107 -3.983 2.727c2.523 .957 4.345 .462 5.458 -.34c1.965 -1.52 2.879 -3.542 2.879 -5.557c-.014 -1.398 .194 -2.695 -1.26 -4.75"
+		/>
+	</svg>
+</template>
diff --git a/components/PillChip.vue b/components/PillChip.vue
index 91e757e..ca71ba6 100644
--- a/components/PillChip.vue
+++ b/components/PillChip.vue
@@ -3,6 +3,7 @@
 		:is="componentType"
 		:href="href || undefined"
 		:target="href ? '_blank' : undefined"
+		:title="href ? text : undefined"
 		:rel="href ? 'noopener noreferrer' : undefined"
 		:to="to || undefined"
 		class="pill-chip"
@@ -83,25 +84,25 @@ const handleClick = (event) => {
 
 <style lang="scss" scoped>
 .pill-chip {
-	--icon-size: 1.8rem;
-
 	display: inline-flex;
 	align-items: center;
-	gap: 0.375rem;
-	padding: 0.275rem;
-	font-size: 0.9rem;
+	gap: 0.375em;
+	padding: 0.2em;
+	font-size: var(--pillchip-font-size);
 	font-weight: 500;
 	font-family: inherit;
 	text-decoration: none;
 	background-color: var(--chip-bg);
 	color: var(--chip-text);
-	backdrop-filter: blur(2rem);
+	backdrop-filter: blur(1rem);
 	border: color-mix(in oklab, currentColor, transparent 85%) 2px solid;
 	border-radius: 50vw;
 	outline: none;
 	cursor: pointer;
 	transition: all 0.25s ease;
 
+	--icon-size: 1.8em;
+
 	&__icon {
 		display: flex;
 		flex-shrink: 0;
diff --git a/entrypoints/popup/App.vue b/entrypoints/popup/App.vue
index da34951..908483a 100644
--- a/entrypoints/popup/App.vue
+++ b/entrypoints/popup/App.vue
@@ -1,12 +1,14 @@
 <script setup>
-import Header from './components/Header.vue'
 import PopupImage from './components/PopupImage.vue'
+import Header from './components/Header.vue'
+import Recommendation from './components/Recommendation.vue'
 </script>
 
 <template>
 	<div class="popup">
 		<PopupImage />
 		<Header />
+		<Recommendation />
 	</div>
 </template>
 
diff --git a/entrypoints/popup/components/Header.vue b/entrypoints/popup/components/Header.vue
index 0d45ba2..acc2efc 100644
--- a/entrypoints/popup/components/Header.vue
+++ b/entrypoints/popup/components/Header.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { version, name } from '@/package.json'
 import PillChip from '@/components/PillChip.vue'
 import IconGithub from '@/components/Icons/Github.vue'
 
 const EXT_VERSION = ref(`v${version}`)
 const EXT_REPO = `https://github.com/itsmartashub/${name}`
-const EXT_RELEASE_LINK = computed(() => `${EXT_REPO}/releases/tag/v${EXT_VERSION.value}`)
+// const EXT_RELEASE_LINK = computed(() => `${EXT_REPO}/releases/tag/v${EXT_VERSION.value}`)
 </script>
 
 <template>
diff --git a/entrypoints/popup/components/PopupImage.vue b/entrypoints/popup/components/PopupImage.vue
index 0b07a86..f7fc6dc 100644
--- a/entrypoints/popup/components/PopupImage.vue
+++ b/entrypoints/popup/components/PopupImage.vue
@@ -11,7 +11,7 @@ import dsHeaderImg from '@/assets/img/ds-header-lg.webp'
 	inset: 0;
 	z-index: -1;
 	width: 100%;
-	height: 20rem;
+	height: 22rem;
 	object-fit: cover;
 	object-position: center;
 	display: block;
diff --git a/entrypoints/popup/components/Recommendation.vue b/entrypoints/popup/components/Recommendation.vue
new file mode 100644
index 0000000..44e573a
--- /dev/null
+++ b/entrypoints/popup/components/Recommendation.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref } from 'vue'
+import PillChip from '@/components/PillChip.vue'
+import IconGithub from '@/components/Icons/Github.vue'
+import IconFirefox from '@/components/Icons/Firefox.vue'
+import IconChrome from '@/components/Icons/Chrome.vue'
+
+const extLinks = [
+	{
+		name: 'Github',
+		url: 'https://github.com/itsmartashub/GPThemes',
+		icon: IconGithub,
+	},
+	{
+		name: 'Chrome',
+		url: 'https://chromewebstore.google.com/detail/gpthemes/bghdlfnkbghekhdadaokecnhkcodfcna',
+		icon: IconChrome,
+	},
+	{
+		name: 'Firefox',
+		url: 'https://addons.mozilla.org/en-US/firefox/addon/gpthemes/',
+		icon: IconFirefox,
+	},
+]
+</script>
+
+<template>
+	<div class="recommendation">
+		<p>
+			Enjoying this? Try
+			<a href="https://github.com/itsmartashub/GPThemes" target="_blank" rel="noopener noreferrer"
+				><b>GPT<span>hemes</span></b></a
+			>
+			for ChatGPT
+		</p>
+		<ul class="recommendation__items">
+			<li v-for="link in extLinks" :key="link.name" class="recommendation__item">
+				<PillChip :icon="link.icon" chip-bg="var(--on-accent)" chip-text="var(--accent)" :href="link.url" />
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.recommendation {
+	position: fixed;
+	bottom: 0%;
+	left: 50%;
+	transform: translateX(-50%);
+	width: max-content;
+	background-color: color-mix(in oklab, var(--accent), transparent 90%);
+	backdrop-filter: blur(0.65rem) saturate(1.12);
+	border-radius: var(--br);
+	padding: 0.8rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.65rem;
+	margin-bottom: 0.5rem;
+	box-shadow: 0 0 1px 1px color-mix(in oklab, var(--accent), transparent 90%) inset;
+	z-index: -1;
+	// text-shadow: 0 0 8px color-mix(in oklab, var(--accent), black 60%);
+
+	p {
+		b {
+			padding: 0.25rem 0.5rem;
+			font-weight: bold;
+			background-color: color-mix(in oklab, var(--accent), transparent 90%);
+			border-radius: 0.5rem;
+			box-shadow: 0 0 1px 1px color-mix(in oklab, var(--accent), transparent 90%) inset;
+			transition: all 0.2s ease;
+
+			span {
+				font-weight: 400;
+			}
+		}
+
+		a {
+			&:hover {
+				b {
+					background-color: var(--accent);
+					color: var(--on-accent);
+				}
+			}
+		}
+	}
+
+	&__items {
+		--pillchip-font-size: 0.75rem;
+		padding: 0.1rem;
+		align-self: center;
+		display: flex;
+		gap: 0.5rem;
+		font-size: 0.825em;
+		// z-index: 10;
+		// translate: 0 50%;
+		border-radius: 50vw;
+		// background-color: color-mix(in oklab, var(--accent), transparent 90%);
+		// border: 2px solid color-mix(in oklab, var(--accent), transparent 90%);
+		// backdrop-filter: blur(2rem);
+	}
+}
+</style>
diff --git a/entrypoints/popup/style.scss b/entrypoints/popup/style.scss
index 600002b..876130e 100644
--- a/entrypoints/popup/style.scss
+++ b/entrypoints/popup/style.scss
@@ -1,7 +1,5 @@
 :root {
-    --accent: #bcbfdb;
-    // --bg: #5e6184;
-    // --on-accent: color-mix(in oklab, var(--accent) 20%, #31344d);
+    --accent: #adb4e4;
     --on-accent: #5e6184;
 }
 
@@ -11,10 +9,11 @@
 }
 
 body {
-    // background-color: var(--accent-darker);
-    // color: var(--accent);
-    // background-image: url("@/assets/img/ds-header-lg.webp") no-repeat center fixed;
-    // background-size: cover;
+    background-color: var(--on-accent);
+    color: var(--accent);
+    font-size: 0.925em;
+    line-height: 1.625;
+    text-shadow: 0 0 1px color-mix(in oklab, var(--accent), black 60%);
 }
 
 #app {
@@ -28,10 +27,19 @@ h3,
 h4,
 h5,
 h6,
-a {
+a,
+p {
     color: var(--accent);
 }
 
+ul {
+    list-style: none;
+}
+
+li {
+    list-style-type: none;
+}
+
 a {
     text-decoration: none;
 }
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index 9459d33..a5d0f43 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -61,6 +61,8 @@
     --c-scrollbar-track: transparent;
     --c-scrollbar-corner: var(--c-scrollbar-thumb);
 
+    --pillchip-font-size: 0.875rem;
+
 
     @include dev('md') {
         --p-chat-bubble: calc(var(--br) * 1.2);

From c22b25ac99356c3e4c2eb48534edebb3a3b000ec Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 6 Sep 2025 21:26:39 +0200
Subject: [PATCH 2/4] feat(popup): Add `title` attributes to pill links for
 better user context

---
 components/PillChip.vue                       |  8 ++++++--
 entrypoints/popup/components/Header.vue       |  1 +
 entrypoints/popup/components/PopupImage.vue   |  2 +-
 .../popup/components/Recommendation.vue       | 19 +++++++++++++++++--
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/components/PillChip.vue b/components/PillChip.vue
index ca71ba6..97f4400 100644
--- a/components/PillChip.vue
+++ b/components/PillChip.vue
@@ -3,7 +3,7 @@
 		:is="componentType"
 		:href="href || undefined"
 		:target="href ? '_blank' : undefined"
-		:title="href ? text : undefined"
+		:title="href ? title : undefined"
 		:rel="href ? 'noopener noreferrer' : undefined"
 		:to="to || undefined"
 		class="pill-chip"
@@ -45,6 +45,10 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	title: {
+		type: String,
+		default: '',
+	},
 	to: {
 		type: [String, Object],
 		default: '',
@@ -133,7 +137,7 @@ const handleClick = (event) => {
 	&:hover {
 		background-color: var(--chip-text);
 		color: var(--chip-bg);
-		transform: scale(0.95);
+		transform: scale(0.9);
 
 		.pill-chip__icon {
 			background-color: var(--icon-color);
diff --git a/entrypoints/popup/components/Header.vue b/entrypoints/popup/components/Header.vue
index acc2efc..9f0cbf4 100644
--- a/entrypoints/popup/components/Header.vue
+++ b/entrypoints/popup/components/Header.vue
@@ -17,6 +17,7 @@ const EXT_REPO = `https://github.com/itsmartashub/${name}`
 			chip-bg="var(--on-accent)"
 			chip-text="var(--accent)"
 			:href="EXT_REPO"
+			title="DeepStyled Github Repository"
 		/>
 	</header>
 </template>
diff --git a/entrypoints/popup/components/PopupImage.vue b/entrypoints/popup/components/PopupImage.vue
index f7fc6dc..1bf3e9a 100644
--- a/entrypoints/popup/components/PopupImage.vue
+++ b/entrypoints/popup/components/PopupImage.vue
@@ -11,7 +11,7 @@ import dsHeaderImg from '@/assets/img/ds-header-lg.webp'
 	inset: 0;
 	z-index: -1;
 	width: 100%;
-	height: 22rem;
+	height: 24rem;
 	object-fit: cover;
 	object-position: center;
 	display: block;
diff --git a/entrypoints/popup/components/Recommendation.vue b/entrypoints/popup/components/Recommendation.vue
index 44e573a..6f45d09 100644
--- a/entrypoints/popup/components/Recommendation.vue
+++ b/entrypoints/popup/components/Recommendation.vue
@@ -28,14 +28,24 @@ const extLinks = [
 	<div class="recommendation">
 		<p>
 			Enjoying this? Try
-			<a href="https://github.com/itsmartashub/GPThemes" target="_blank" rel="noopener noreferrer"
+			<a
+				href="https://github.com/itsmartashub/GPThemes"
+				target="_blank"
+				rel="noopener noreferrer"
+				title="Github Repository"
 				><b>GPT<span>hemes</span></b></a
 			>
 			for ChatGPT
 		</p>
 		<ul class="recommendation__items">
 			<li v-for="link in extLinks" :key="link.name" class="recommendation__item">
-				<PillChip :icon="link.icon" chip-bg="var(--on-accent)" chip-text="var(--accent)" :href="link.url" />
+				<PillChip
+					:icon="link.icon"
+					chip-bg="var(--on-accent)"
+					chip-text="var(--accent)"
+					:href="link.url"
+					:title="`GPThemes on ${link.name}`"
+				/>
 			</li>
 		</ul>
 	</div>
@@ -59,6 +69,11 @@ const extLinks = [
 	box-shadow: 0 0 1px 1px color-mix(in oklab, var(--accent), transparent 90%) inset;
 	z-index: -1;
 	// text-shadow: 0 0 8px color-mix(in oklab, var(--accent), black 60%);
+	transition: translate 0.35s $easeInOutBack;
+
+	&:hover {
+		translate: 0 -0.25rem;
+	}
 
 	p {
 		b {

From e22320398a5e54b0cb210d9d512cd78767dfe1a4 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 6 Sep 2025 21:52:04 +0200
Subject: [PATCH 3/4] feat(custom/bubble): Add toggle to make user chat bubbles
 full width

- Add a new toggle in the settings to allow user chat bubbles to span 100% of the available width
- Adjust user chat bubble width from `max-content` to `100%` when the toggle is enabled
- Ensure the user chat bubbles match the width of AI chat bubbles for a more consistent layout

Changes summary:
- Added a new toggle in the settings that allows user chat bubbles to take up the full available width (100%) instead of being constrained to `max-content`. This change ensures user chat bubbles can match the width of AI chat bubbles, providing a more balanced and consistent chat layout.
---
 components/Custom/Layouts/Toggles.vue              | 14 +++++++++++++-
 components/Icons/BubbleOFF.vue                     |  7 +++----
 .../Icons/{IconFullWidth.vue => FullWidth.vue}     |  0
 styles/customs/_custom-toggles.scss                |  7 +++++++
 utils/storage.js                                   |  2 ++
 5 files changed, 25 insertions(+), 5 deletions(-)
 rename components/Icons/{IconFullWidth.vue => FullWidth.vue} (100%)

diff --git a/components/Custom/Layouts/Toggles.vue b/components/Custom/Layouts/Toggles.vue
index 0bd2c6a..54dc353 100644
--- a/components/Custom/Layouts/Toggles.vue
+++ b/components/Custom/Layouts/Toggles.vue
@@ -14,20 +14,32 @@
 			subtitle="Turn off the AI bubble style to match the default Deepseek look and feel."
 			:iconComponent="IconBubbleOFF"
 		/>
+
+		<CardToggle
+			v-model="toggleUserBubbleFullWidthState"
+			title="User Bubble Full Width"
+			subtitle="Make User bubble full width to match the AI bubble width."
+			:iconComponent="IconFullWidth"
+		/>
 	</div>
 </template>
 
 <script setup>
-import { hideThinkingItem, toggleBubbleAIItem } from '@/utils/storage'
+import { hideThinkingItem, toggleBubbleAIItem, toggleUserBubbleFullWidthItem } from '@/utils/storage'
 import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
 import CardToggle from '@/components/Cards/Toggle.vue'
 import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue'
 import IconBubbleOFF from '@/components/Icons/BubbleOFF.vue'
+import IconFullWidth from '@/components/Icons/FullWidth.vue'
 
 // One toggle controls everything
 const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
 const toggleBubbleAI = useToggleStorage(toggleBubbleAIItem, 'dsx-toggle-ai-bubble')
+const toggleUserBubbleFullWidthState = useToggleStorage(
+	toggleUserBubbleFullWidthItem,
+	'dsx-toggle-user-bubble-full-width'
+)
 </script>
 
 <style lang="scss">
diff --git a/components/Icons/BubbleOFF.vue b/components/Icons/BubbleOFF.vue
index 02988b7..c985f80 100644
--- a/components/Icons/BubbleOFF.vue
+++ b/components/Icons/BubbleOFF.vue
@@ -9,13 +9,12 @@
 		stroke-width="2"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		class="icon icon-tabler icons-tabler-outline icon-tabler-bubble-x"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle-off"
 	>
 		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 		<path
-			d="M13.5 18.75c-.345 .09 -.727 .25 -1.1 .25a4.3 4.3 0 0 1 -1.57 -.298l-3.83 2.298v-3.134a2.668 2.668 0 0 1 -1.795 -3.773a4.8 4.8 0 0 1 2.908 -8.933a5.335 5.335 0 0 1 9.194 1.078a5.333 5.333 0 0 1 4.484 6.778"
+			d="M8.595 4.577c3.223 -1.176 7.025 -.61 9.65 1.63c2.982 2.543 3.601 6.523 1.636 9.66m-1.908 2.109c-2.787 2.19 -6.89 2.666 -10.273 1.024l-4.7 1l1.3 -3.9c-2.229 -3.296 -1.494 -7.511 1.68 -10.057"
 		/>
-		<path d="M22 22l-5 -5" />
-		<path d="M17 22l5 -5" />
+		<path d="M3 3l18 18" />
 	</svg>
 </template>
diff --git a/components/Icons/IconFullWidth.vue b/components/Icons/FullWidth.vue
similarity index 100%
rename from components/Icons/IconFullWidth.vue
rename to components/Icons/FullWidth.vue
diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index fcbd449..dd05cab 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -14,6 +14,13 @@ html[dsx-toggle-accent-user-bubble] {
     }
 }
 
+html[dsx-toggle-user-bubble-full-width] {
+    .fbb737a4 {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+}
+
 html[dsx-toggle-ai-bubble] {
     ._4f9bf79 {
         background: transparent !important;
diff --git a/utils/storage.js b/utils/storage.js
index c658a3c..406d50e 100644
--- a/utils/storage.js
+++ b/utils/storage.js
@@ -49,6 +49,7 @@ const STORAGE_CONFIG = Object.freeze({
 		maxWidthTextareaItem: { key: 'local:maxWidthTextarea', fallback: { value: DEFAULT_MAX_WIDTH, unit: 'px' } },
 		hideThinkingItem: { key: 'local:hideThinking', fallback: false },
 		toggleBubbleAIItem: { key: 'local:toggleGptBubble', fallback: false },
+		toggleUserBubbleFullWidthItem: { key: 'local:toggleUserBubbleFullWidth', fallback: false },
 	},
 })
 
@@ -82,4 +83,5 @@ export const {
 	hideThinkingItem,
 	accentUserBubbleItem,
 	toggleBubbleAIItem,
+	toggleUserBubbleFullWidthItem,
 } = storageItems

From 7aee18fbc3622a4bb5384f6aa1a47f052f2efd22 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 6 Sep 2025 22:06:40 +0200
Subject: [PATCH 4/4] feat(custom/bubble): Ensure user bubble in edit state
 respects full-width toggle

- Update the user chat bubble in edit state to also span 100% width if the "Full Width Bubble" toggle is enabled
- Ensure consistency between normal and edit states for user chat bubbles when the toggle is active
- Maintain proper alignment and styling for both states

Changes summary:
- Fixed the user chat bubble in edit state to respect the "Full Width Bubble" toggle setting. When the toggle is enabled, both normal and edit states of the user chat bubble now span 100% of the available width, ensuring a consistent appearance across all states.
---
 styles/customs/_custom-toggles.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index dd05cab..82aa50f 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -19,6 +19,12 @@ html[dsx-toggle-user-bubble-full-width] {
         width: 100% !important;
         max-width: 100% !important;
     }
+
+    /* User chat bubble in edit state */
+    ._9663006._3111eee .ds-textarea {
+        // width: 100% !important;
+        max-width: 100% !important;
+    }
 }
 
 html[dsx-toggle-ai-bubble] {