From 91cc97be66e21b64e8ace9e8e6869c66e6314cc1 Mon Sep 17 00:00:00 2001
From: Pham Ngoc Duong <pnd280@gmail.com>
Date: Thu, 9 Jan 2025 22:02:24 +0700
Subject: [PATCH] style: improve consistency on font weight & scrollbar

---
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  53 ++++++
 src/components/CodeHighlighter.tsx            |  19 ++-
 src/components/Tooltip.tsx                    |   3 +-
 src/components/ui/dialog.tsx                  |   2 +-
 src/components/ui/scroll-area.tsx             |  49 ++++++
 .../plugin-details/PluginDetailsModal.tsx     |   2 +-
 .../plugin-details/content/Canvas.tsx         |  13 +-
 src/features/plugins/command-menu/Wrapper.tsx |   4 +-
 .../command-menu/components/BaseItem.tsx      |   2 +
 .../space-search-items/SpaceItem.tsx          |   2 +-
 .../thread-search-items/ThreadItem.tsx        |   2 +-
 .../ImageGenModelSelector.tsx                 |   3 +-
 .../query-box/focus-selector/Wrapper.tsx      |  11 ++
 .../components/DesktopSelectContent.tsx       |   2 +-
 .../components/MobileSelectContent.tsx        |   2 +-
 .../FocusWebRecencySelector.tsx               |   7 +-
 .../focus-web-recency/FollowUpWrapper.tsx     |   6 +-
 .../components/DesktopSelectContent.tsx       |   2 +-
 .../components/MobileSelectContent.tsx        |   2 +-
 .../components/DesktopSelectContent.tsx       |   2 +-
 .../components/MobileSelectContent.tsx        |   2 +-
 .../components/ModelTrigger.tsx               |   2 +-
 .../prompt-history/PromptHistoryItem.tsx      |   2 +-
 .../plugins/query-box/shared-store.ts         |  32 ----
 .../query-box/slash-command-menu/Wrapper.tsx  |   3 +-
 .../query-box/space-navigator/SpaceItem.tsx   | 153 +++++++++---------
 .../space-navigator/SpaceNavigatorContent.tsx |   7 +
 .../CopyButton.tsx                            |   2 +-
 .../explicit-model-name.ts                    |   2 +-
 .../simplify-rewrite-dropdown.css             |   3 +-
 .../words-and-characters-count.ts             |   4 +-
 .../canvas/components/CanvasContent.tsx       |   2 +-
 .../thread/canvas/components/CodeView.tsx     |   2 +-
 .../PrePromptInstallationDialog.tsx           |  19 ++-
 .../thread/export-thread/ExportButton.tsx     |   4 +-
 src/services/cs-loader-registry.ts            |   3 +-
 src/services/pplx-api/pplx-api.ts             |   6 +-
 src/utils/dom-selectors.ts                    |   3 +-
 39 files changed, 280 insertions(+), 162 deletions(-)
 create mode 100644 src/components/ui/scroll-area.tsx

diff --git a/package.json b/package.json
index 19b86358..cf1a8815 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity AI Supercharged",
-  "version": "1.2.6.0",
+  "version": "1.2.7.0",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity AI",
   "type": "module",
@@ -36,6 +36,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.4",
     "@tanstack/react-query": "^5.62.16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 403f6565..612f43a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@radix-ui/react-collapsible':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.2
+        version: 1.2.2(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-slot':
         specifier: ^1.1.1
         version: 1.1.1(@types/react@19.0.3)(react@19.0.0)
@@ -861,6 +864,9 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
   '@radix-ui/primitive@1.1.1':
     resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
 
@@ -921,6 +927,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.3':
     resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
     peerDependencies:
@@ -1004,6 +1019,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.2.2':
+    resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.1.1':
     resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
     peerDependencies:
@@ -6440,6 +6468,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
+  '@radix-ui/number@1.1.0': {}
+
   '@radix-ui/primitive@1.1.1': {}
 
   '@radix-ui/react-collapsible@1.1.2(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
@@ -6504,6 +6534,12 @@ snapshots:
       '@types/react': 19.0.3
       '@types/react-dom': 19.0.2(@types/react@19.0.3)
 
+  '@radix-ui/react-direction@1.1.0(@types/react@19.0.3)(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 19.0.3
+
   '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -6570,6 +6606,23 @@ snapshots:
       '@types/react': 19.0.3
       '@types/react-dom': 19.0.2(@types/react@19.0.3)
 
+  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.3)(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.0.3)(react@19.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.0.3)(react@19.0.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.2(@types/react@19.0.3))(@types/react@19.0.3)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.3)(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.0.3)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.3
+      '@types/react-dom': 19.0.2(@types/react@19.0.3)
+
   '@radix-ui/react-slot@1.1.1(@types/react@19.0.3)(react@19.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.3)(react@19.0.0)
diff --git a/src/components/CodeHighlighter.tsx b/src/components/CodeHighlighter.tsx
index ee8e0069..4d42667e 100644
--- a/src/components/CodeHighlighter.tsx
+++ b/src/components/CodeHighlighter.tsx
@@ -1,18 +1,13 @@
 import { ComponentProps } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import lightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/vs";
-import darkStyle from "react-syntax-highlighter/dist/esm/styles/hljs/vs2015";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import lightStyle from "react-syntax-highlighter/dist/esm/styles/prism/vs";
+import darkStyle from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
 
 import { useColorSchemeStore } from "@/data/color-scheme-store";
 
 const INTERPRETED_LANGUAGES: Record<string, string> = {
-  html: "xml",
-  react: "javascript",
-  jsx: "javascript",
-  tsx: "typescript",
-  js: "javascript",
-  ts: "typescript",
-  py: "python",
+  html: "markup",
+  react: "jsx",
 };
 
 const CodeHighlighter = memo(function CodeHighlighter({
@@ -35,6 +30,10 @@ const CodeHighlighter = memo(function CodeHighlighter({
   return (
     <SyntaxHighlighter
       style={colorScheme === "dark" ? darkStyle : lightStyle}
+      codeTagProps={{
+        className: "tw-font-mono",
+        style: {},
+      }}
       language={targetLanguage}
       {...props}
     >
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 70a435d9..99f09a99 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -28,6 +28,7 @@ export default function Tooltip({
 }: TooltipProps) {
   return (
     <TooltipRoot
+      unmountOnExit
       lazyMount={true}
       openDelay={0}
       closeDelay={0}
@@ -43,7 +44,7 @@ export default function Tooltip({
       </TooltipTrigger>
       {!(typeof content === "string" && content.length === 0) && (
         <TooltipContent asChild portal={portal}>
-          <div>{content}</div>
+          <div className="tw-font-medium">{content}</div>
         </TooltipContent>
       )}
     </TooltipRoot>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index f7fa6e3e..f517d12d 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -46,7 +46,7 @@ const DialogContent = ({
       <ArkDialog.Positioner>
         <ArkDialog.Content
           className={cn(
-            "tw-fixed tw-left-[50%] tw-top-[50%] tw-z-50 tw-flex tw-w-full tw-max-w-lg tw-flex-col tw-fill-mode-forwards",
+            "custom-scrollbar tw-fixed tw-left-[50%] tw-top-[50%] tw-z-50 tw-flex tw-max-h-[95vh] tw-w-full tw-max-w-lg tw-flex-col tw-overflow-y-auto tw-fill-mode-forwards",
             "tw-translate-x-[-50%] tw-translate-y-[-50%] tw-gap-4 tw-border tw-border-border/50 tw-bg-background tw-p-6 tw-shadow-lg tw-duration-200",
             "tw-max-h-[95vh] data-[state=closed]:tw-hidden data-[state=closed]:tw-animate-out data-[state=open]:tw-fade-in-0",
             "sm:tw-rounded-lg",
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..d70d48a9
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,49 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ComponentProps } from "react";
+
+const ScrollArea = ({
+  className,
+  children,
+  type = "always",
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.Root>) => (
+  <ScrollAreaPrimitive.Root
+    type={type}
+    className={cn("tw-relative tw-overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="tw-h-full tw-w-full tw-rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollBar orientation="horizontal" />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    orientation={orientation}
+    className={cn(
+      "tw-flex tw-touch-none tw-select-none tw-transition-colors",
+      orientation === "vertical" &&
+        "tw-h-full tw-w-2.5 tw-border-l tw-border-l-transparent tw-p-[1px]",
+      orientation === "horizontal" &&
+        "tw-h-2.5 tw-flex-col tw-border-t tw-border-t-transparent tw-p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="tw-relative tw-flex-1 tw-rounded-full tw-bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
+
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/src/features/options-page/dashboard/pages/plugins/components/plugin-details/PluginDetailsModal.tsx b/src/features/options-page/dashboard/pages/plugins/components/plugin-details/PluginDetailsModal.tsx
index 19b69cfa..8edad030 100644
--- a/src/features/options-page/dashboard/pages/plugins/components/plugin-details/PluginDetailsModal.tsx
+++ b/src/features/options-page/dashboard/pages/plugins/components/plugin-details/PluginDetailsModal.tsx
@@ -45,7 +45,7 @@ export default function PluginDetailsModal({
             {PLUGINS_METADATA[pluginId].description}
           </DialogDescription>
         </DialogHeader>
-        {PLUGIN_DETAILS[pluginId]}
+        <div className="tw-mt-4">{PLUGIN_DETAILS[pluginId]}</div>
       </DialogContentComp>
     </DialogComp>
   );
diff --git a/src/features/options-page/dashboard/pages/plugins/components/plugin-details/content/Canvas.tsx b/src/features/options-page/dashboard/pages/plugins/components/plugin-details/content/Canvas.tsx
index ee9c77e8..ae91850a 100644
--- a/src/features/options-page/dashboard/pages/plugins/components/plugin-details/content/Canvas.tsx
+++ b/src/features/options-page/dashboard/pages/plugins/components/plugin-details/content/Canvas.tsx
@@ -7,7 +7,7 @@ export default function CanvasPluginDetails() {
   const { settings, mutation } = useExtensionLocalStorage();
 
   return (
-    <div className="tw-flex tw-max-w-screen-lg tw-flex-col tw-gap-4 tw-overflow-auto">
+    <div className="tw-flex tw-max-w-screen-lg tw-flex-col tw-gap-4">
       <Switch
         textLabel="Enable"
         checked={settings?.plugins["thread:canvas"].enabled}
@@ -99,6 +99,17 @@ export default function CanvasPluginDetails() {
                     </div>
                   </td>
                 </tr>
+                <tr>
+                  <td className="tw-border tw-border-border tw-bg-secondary tw-p-2 tw-text-secondary-foreground">
+                    Supported language models
+                  </td>
+                  <td className="tw-border tw-border-border tw-p-2 tw-text-center tw-text-muted-foreground">
+                    any
+                  </td>
+                  <td className="tw-border tw-border-border tw-p-2 tw-text-center">
+                    Claude 3.5 Sonnet, GPT-4o, GPT-o1, Sonar Huge, Grok-2
+                  </td>
+                </tr>
                 <tr>
                   <td className="tw-border tw-border-border tw-bg-secondary tw-p-2 tw-text-secondary-foreground">
                     Ease of use
diff --git a/src/features/plugins/command-menu/Wrapper.tsx b/src/features/plugins/command-menu/Wrapper.tsx
index cb71cc66..49ec8b9c 100644
--- a/src/features/plugins/command-menu/Wrapper.tsx
+++ b/src/features/plugins/command-menu/Wrapper.tsx
@@ -89,7 +89,9 @@ export default function CommandMenuWrapper() {
         <SearchFilterBadge />
         <CommandInput
           ref={ref}
-          className="tw-grow tw-border-none"
+          className={cn("tw-grow tw-border-none", {
+            "tw-font-medium": !searchValue,
+          })}
           placeholder={
             !filter
               ? t("plugin-command-menu:commandMenu.input.placeholder")
diff --git a/src/features/plugins/command-menu/components/BaseItem.tsx b/src/features/plugins/command-menu/components/BaseItem.tsx
index db8e9e3b..cb79836b 100644
--- a/src/features/plugins/command-menu/components/BaseItem.tsx
+++ b/src/features/plugins/command-menu/components/BaseItem.tsx
@@ -22,6 +22,7 @@ const BaseMenuItem = memo(function BaseMenuItem({
   keywords,
   onSelect,
   closeOnSelect = true,
+  className,
   ...props
 }: BaseMenuItemProps) {
   const { closeCommandMenu } = useCommandMenuStore();
@@ -29,6 +30,7 @@ const BaseMenuItem = memo(function BaseMenuItem({
   return (
     <CommandItem
       keywords={keywords}
+      className={cn("tw-font-medium", className)}
       onSelect={() => {
         onSelect?.();
         if (closeOnSelect) closeCommandMenu();
diff --git a/src/features/plugins/command-menu/components/space-search-items/SpaceItem.tsx b/src/features/plugins/command-menu/components/space-search-items/SpaceItem.tsx
index c8b0b9bd..8e3b5007 100644
--- a/src/features/plugins/command-menu/components/space-search-items/SpaceItem.tsx
+++ b/src/features/plugins/command-menu/components/space-search-items/SpaceItem.tsx
@@ -46,7 +46,7 @@ export function SpaceItem({ space }: SpaceItemProps) {
       value={space.uuid}
       keywords={[searchKeyword]}
       className={cn(
-        "tw-flex tw-min-h-10 tw-items-center",
+        "tw-flex tw-min-h-10 tw-items-center tw-font-medium",
         isHighlighted && "tw-h-max",
       )}
       onSelect={() => {
diff --git a/src/features/plugins/command-menu/components/thread-search-items/ThreadItem.tsx b/src/features/plugins/command-menu/components/thread-search-items/ThreadItem.tsx
index 7232bdeb..729857df 100644
--- a/src/features/plugins/command-menu/components/thread-search-items/ThreadItem.tsx
+++ b/src/features/plugins/command-menu/components/thread-search-items/ThreadItem.tsx
@@ -19,7 +19,7 @@ export function ThreadItem({ thread }: ThreadItemProps) {
       key={thread.slug}
       asChild
       value={thread.slug}
-      className="tw-flex tw-h-10 tw-items-center tw-justify-between tw-gap-8"
+      className="tw-flex tw-h-10 tw-items-center tw-justify-between tw-gap-8 tw-font-medium"
       onSelect={() => {
         if (isHotkeyPressed("ctrl"))
           return window.open(`/search/${thread.slug}`, "_blank");
diff --git a/src/features/plugins/image-gen-popover/ImageGenModelSelector.tsx b/src/features/plugins/image-gen-popover/ImageGenModelSelector.tsx
index b68642e5..95e48f84 100644
--- a/src/features/plugins/image-gen-popover/ImageGenModelSelector.tsx
+++ b/src/features/plugins/image-gen-popover/ImageGenModelSelector.tsx
@@ -53,7 +53,7 @@ export default function ImageGenModelSelector() {
         <SelectTrigger variant="ghost">
           <div className="tw-flex tw-min-h-8 tw-items-center tw-justify-center tw-gap-1">
             <Image className="tw-size-4" />
-            <SelectValue>
+            <SelectValue className="tw-font-medium">
               {imageGenModels.find((model) => model.code === value)?.shortLabel}
             </SelectValue>
             <span className="tw-self-start tw-text-[.5rem] tw-text-primary">
@@ -77,6 +77,7 @@ export default function ImageGenModelSelector() {
               <SelectItem
                 key={model.code}
                 item={model.code}
+                className="tw-font-medium"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
diff --git a/src/features/plugins/query-box/focus-selector/Wrapper.tsx b/src/features/plugins/query-box/focus-selector/Wrapper.tsx
index 7634df54..97bb1f21 100644
--- a/src/features/plugins/query-box/focus-selector/Wrapper.tsx
+++ b/src/features/plugins/query-box/focus-selector/Wrapper.tsx
@@ -1,4 +1,5 @@
 import { createListCollection, SelectContext } from "@ark-ui/react";
+import { sendMessage } from "webext-bridge/content-script";
 
 import Tooltip from "@/components/Tooltip";
 import { Select, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -34,6 +35,16 @@ export default function FocusSelectorWrapper() {
     FOCUS_MODES.find((mode) => mode.code === selectedFocusMode) ??
     FOCUS_MODES[0]!;
 
+  useEffect(() => {
+    sendMessage(
+      "reactVdom:setFocusMode",
+      {
+        focusMode: selectedFocusMode,
+      },
+      "window",
+    );
+  }, [selectedFocusMode]);
+
   return (
     <Select
       lazyMount
diff --git a/src/features/plugins/query-box/focus-selector/components/DesktopSelectContent.tsx b/src/features/plugins/query-box/focus-selector/components/DesktopSelectContent.tsx
index a78c1762..e1d351ad 100644
--- a/src/features/plugins/query-box/focus-selector/components/DesktopSelectContent.tsx
+++ b/src/features/plugins/query-box/focus-selector/components/DesktopSelectContent.tsx
@@ -8,7 +8,7 @@ export function DesktopSelectContent() {
         <SelectItem
           key={mode.code}
           item={mode.code}
-          className="tw-flex tw-flex-col tw-items-start tw-gap-1 tw-text-foreground"
+          className="tw-flex tw-flex-col tw-items-start tw-gap-1 tw-font-medium tw-text-foreground"
         >
           <div className="tw-flex tw-items-center tw-gap-2">
             <mode.Icon className="tw-size-4" />
diff --git a/src/features/plugins/query-box/focus-selector/components/MobileSelectContent.tsx b/src/features/plugins/query-box/focus-selector/components/MobileSelectContent.tsx
index 50c85390..94ba6b53 100644
--- a/src/features/plugins/query-box/focus-selector/components/MobileSelectContent.tsx
+++ b/src/features/plugins/query-box/focus-selector/components/MobileSelectContent.tsx
@@ -11,7 +11,7 @@ export function MobileSelectContent({ ...props }: DialogProps) {
           <SelectItem
             key={mode.code}
             item={mode.code}
-            className="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-py-3 tw-text-foreground"
+            className="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-py-3 tw-font-medium tw-text-foreground"
           >
             <div className="tw-flex tw-items-center tw-gap-3">
               <mode.Icon className="tw-size-5" />
diff --git a/src/features/plugins/query-box/focus-web-recency/FocusWebRecencySelector.tsx b/src/features/plugins/query-box/focus-web-recency/FocusWebRecencySelector.tsx
index aef14e86..6ca5d88c 100644
--- a/src/features/plugins/query-box/focus-web-recency/FocusWebRecencySelector.tsx
+++ b/src/features/plugins/query-box/focus-web-recency/FocusWebRecencySelector.tsx
@@ -6,7 +6,6 @@ import { Select, SelectTrigger, SelectValue } from "@/components/ui/select";
 import {
   RECENCIES,
   FocusWebRecency,
-  FocusWebRecencyValue,
 } from "@/data/plugins/focus-selector/focus-web-recency";
 import { DesktopSelectContent } from "@/features/plugins/query-box/focus-web-recency/components/DesktopSelectContent";
 import { MobileSelectContent } from "@/features/plugins/query-box/focus-web-recency/components/MobileSelectContent";
@@ -18,8 +17,8 @@ export default function FocusWebRecencySelector({
   setValue,
   recencyData,
 }: {
-  value: FocusWebRecencyValue;
-  setValue: (value: FocusWebRecencyValue) => void;
+  value: FocusWebRecency["value"];
+  setValue: (value: FocusWebRecency["value"]) => void;
   recencyData: FocusWebRecency;
 }) {
   const { isMobile } = useIsMobileStore();
@@ -37,7 +36,7 @@ export default function FocusWebRecencySelector({
       value={[value]}
       className="tw-h-8"
       onValueChange={({ value }) => {
-        setValue(value[0] as FocusWebRecencyValue);
+        setValue(value[0] as FocusWebRecency["value"]);
 
         setTimeout(() => {
           UiUtils.getActiveQueryBoxTextarea().trigger("focus");
diff --git a/src/features/plugins/query-box/focus-web-recency/FollowUpWrapper.tsx b/src/features/plugins/query-box/focus-web-recency/FollowUpWrapper.tsx
index c80ff1b3..11bdd0a2 100644
--- a/src/features/plugins/query-box/focus-web-recency/FollowUpWrapper.tsx
+++ b/src/features/plugins/query-box/focus-web-recency/FollowUpWrapper.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "@uidotdev/usehooks";
 import { sendMessage } from "webext-bridge/content-script";
 
 import {
@@ -23,8 +24,9 @@ export default function FocusWebRecencySelectorFollowUpWrapper() {
     }),
   );
 
-  const messageBlocks = useGlobalDomObserverStore(
-    (state) => state.threadComponents.messageBlocks,
+  const messageBlocks = useDebounce(
+    useGlobalDomObserverStore((state) => state.threadComponents.messageBlocks),
+    100,
   );
 
   const { data: searchFocus, refetch: refetchSearchFocus } = useQuery({
diff --git a/src/features/plugins/query-box/focus-web-recency/components/DesktopSelectContent.tsx b/src/features/plugins/query-box/focus-web-recency/components/DesktopSelectContent.tsx
index 2738d309..b5d0494a 100644
--- a/src/features/plugins/query-box/focus-web-recency/components/DesktopSelectContent.tsx
+++ b/src/features/plugins/query-box/focus-web-recency/components/DesktopSelectContent.tsx
@@ -9,7 +9,7 @@ export function DesktopSelectContent() {
           key={recency.value}
           checkboxOnSingleItem
           item={recency.value}
-          className="tw-w-[150px] tw-overflow-hidden tw-p-2"
+          className="tw-w-[150px] tw-overflow-hidden tw-p-2 tw-font-medium"
         >
           <span className="tw-grow-1 tw-line-clamp-1">{recency.label}</span>
         </SelectItem>
diff --git a/src/features/plugins/query-box/focus-web-recency/components/MobileSelectContent.tsx b/src/features/plugins/query-box/focus-web-recency/components/MobileSelectContent.tsx
index cec5f9c6..fd68fba3 100644
--- a/src/features/plugins/query-box/focus-web-recency/components/MobileSelectContent.tsx
+++ b/src/features/plugins/query-box/focus-web-recency/components/MobileSelectContent.tsx
@@ -12,7 +12,7 @@ export function MobileSelectContent({ ...props }: DialogProps) {
             key={recency.value}
             checkboxOnSingleItem
             item={recency.value}
-            className="tw-flex tw-items-center tw-gap-2 tw-py-3"
+            className="tw-flex tw-items-center tw-gap-2 tw-py-3 tw-font-medium"
           >
             <span className="tw-grow-1">{recency.label}</span>
           </SelectItem>
diff --git a/src/features/plugins/query-box/language-model-selector/components/DesktopSelectContent.tsx b/src/features/plugins/query-box/language-model-selector/components/DesktopSelectContent.tsx
index 67cbee0a..91cfe84e 100644
--- a/src/features/plugins/query-box/language-model-selector/components/DesktopSelectContent.tsx
+++ b/src/features/plugins/query-box/language-model-selector/components/DesktopSelectContent.tsx
@@ -36,7 +36,7 @@ export function DesktopSelectContent() {
                 <SelectItem
                   key={model.code}
                   item={model.code}
-                  className="tw-text-foreground"
+                  className="tw-font-medium tw-text-foreground"
                 >
                   <div className="tw-flex tw-max-w-full tw-items-center tw-justify-around tw-gap-2">
                     {Icon != null ? (
diff --git a/src/features/plugins/query-box/language-model-selector/components/MobileSelectContent.tsx b/src/features/plugins/query-box/language-model-selector/components/MobileSelectContent.tsx
index 156b1e36..29379c93 100644
--- a/src/features/plugins/query-box/language-model-selector/components/MobileSelectContent.tsx
+++ b/src/features/plugins/query-box/language-model-selector/components/MobileSelectContent.tsx
@@ -31,7 +31,7 @@ export function MobileSelectContent({ ...props }: DialogProps) {
                 <SelectItem
                   key={model.code}
                   item={model.code}
-                  className="tw-py-3"
+                  className="tw-py-3 tw-font-medium"
                 >
                   <div className="tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-between tw-gap-4">
                     <div className="tw-flex tw-items-center tw-gap-3">
diff --git a/src/features/plugins/query-box/language-model-selector/components/ModelTrigger.tsx b/src/features/plugins/query-box/language-model-selector/components/ModelTrigger.tsx
index 8a1ee6fc..5aa1ef57 100644
--- a/src/features/plugins/query-box/language-model-selector/components/ModelTrigger.tsx
+++ b/src/features/plugins/query-box/language-model-selector/components/ModelTrigger.tsx
@@ -27,7 +27,7 @@ export function ModelTrigger({ value }: { value: LanguageModel["code"] }) {
           "tw-hidden md:tw-flex": type !== "follow-up",
         })}
       >
-        <SelectValue>
+        <SelectValue className="tw-font-medium">
           {languageModels.find((model) => model.code === value)?.shortLabel}
         </SelectValue>
         {limit != null && limit <= 100 && (
diff --git a/src/features/plugins/query-box/prompt-history/PromptHistoryItem.tsx b/src/features/plugins/query-box/prompt-history/PromptHistoryItem.tsx
index 81ffe352..292e6051 100644
--- a/src/features/plugins/query-box/prompt-history/PromptHistoryItem.tsx
+++ b/src/features/plugins/query-box/prompt-history/PromptHistoryItem.tsx
@@ -45,7 +45,7 @@ export default function PromptHistoryItem({
       <div className="tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4">
         <div className="">
           <div className="tw-line-clamp-3 tw-whitespace-pre-wrap">
-            {item.prompt}
+            {item.prompt.trim()}
           </div>
         </div>
         <div className="tw-flex tw-flex-shrink-0 tw-items-center tw-gap-2 tw-text-xs tw-text-muted-foreground">
diff --git a/src/features/plugins/query-box/shared-store.ts b/src/features/plugins/query-box/shared-store.ts
index 93b86ad5..671942cf 100644
--- a/src/features/plugins/query-box/shared-store.ts
+++ b/src/features/plugins/query-box/shared-store.ts
@@ -1,5 +1,4 @@
 import { QueryObserver } from "@tanstack/react-query";
-import { sendMessage } from "webext-bridge/content-script";
 import { subscribeWithSelector } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { createWithEqualityFn } from "zustand/traditional";
@@ -15,7 +14,6 @@ import {
 } from "@/data/plugins/query-box/language-model-selector/language-models.types";
 import { csLoaderRegistry } from "@/services/cs-loader-registry";
 import { ExtensionLocalStorageService } from "@/services/extension-local-storage/extension-local-storage";
-import { PluginsStatesService } from "@/services/plugins-states/plugins-states";
 import { PplxApiService } from "@/services/pplx-api/pplx-api";
 import { pplxApiQueries } from "@/services/pplx-api/query-keys";
 import { queryClient } from "@/utils/ts-query-client";
@@ -102,36 +100,6 @@ csLoaderRegistry.register({
     if (isFocusModeCode(defaultFocusMode)) {
       sharedQueryBoxStore.setState({ selectedFocusMode: defaultFocusMode });
     }
-
-    if (
-      PluginsStatesService.getCachedSync().pluginsEnableStates?.[
-        "queryBox:focusSelector"
-      ]
-    ) {
-      sendMessage(
-        "reactVdom:setFocusMode",
-        {
-          focusMode:
-            ExtensionLocalStorageService.getCachedSync()?.plugins[
-              "queryBox:focusSelector"
-            ].defaultFocusMode ?? "internet",
-        },
-        "window",
-      );
-
-      sharedQueryBoxStore.subscribe(
-        (state) => state.selectedFocusMode,
-        (focusMode) => {
-          sendMessage(
-            "reactVdom:setFocusMode",
-            {
-              focusMode,
-            },
-            "window",
-          );
-        },
-      );
-    }
   },
 });
 
diff --git a/src/features/plugins/query-box/slash-command-menu/Wrapper.tsx b/src/features/plugins/query-box/slash-command-menu/Wrapper.tsx
index d4349168..cf2aee66 100644
--- a/src/features/plugins/query-box/slash-command-menu/Wrapper.tsx
+++ b/src/features/plugins/query-box/slash-command-menu/Wrapper.tsx
@@ -77,6 +77,7 @@ const useSlashCommandPopover = ({
     positioning: {
       placement: isSpaceQueryBox ? "bottom-start" : "top-start",
       gutter: isMainQueryBox ? 1 : 5,
+      flip: isSpaceQueryBox ? true : false,
       getAnchorRect: () => anchor?.getBoundingClientRect() ?? null,
     },
     portalled: false,
@@ -109,7 +110,7 @@ const CommandContent = ({
     <PopoverContent
       ref={commandRef}
       className={cn(
-        "tw-overflow-y-auto tw-border-border tw-p-0 tw-shadow-none",
+        "tw-overflow-y-auto tw-border-border tw-p-0 tw-font-medium tw-shadow-none",
         {
           "tw-rounded-b-none tw-border-2 tw-border-b-0": store.type === "main",
         },
diff --git a/src/features/plugins/query-box/space-navigator/SpaceItem.tsx b/src/features/plugins/query-box/space-navigator/SpaceItem.tsx
index 6e5c5f56..16682aa1 100644
--- a/src/features/plugins/query-box/space-navigator/SpaceItem.tsx
+++ b/src/features/plugins/query-box/space-navigator/SpaceItem.tsx
@@ -6,6 +6,7 @@ import { sendMessage } from "webext-bridge/content-script";
 
 import { CommandItem } from "@/components/ui/command";
 import { PopoverContent } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { useSpaRouter } from "@/features/plugins/_core/spa-router/listeners";
 import SpaceItemFile from "@/features/plugins/query-box/space-navigator/SpaceItemFile";
 import { useIsMobileStore } from "@/hooks/use-is-mobile-store";
@@ -23,8 +24,6 @@ export default function SpaceItem({ space }: { space: Space }) {
   const isOnSpacePage =
     spaceSlugFromUrl === space.slug || spaceSlugFromUrl === space.uuid;
 
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
   const ref = useRef<HTMLDivElement>(null);
 
   const isHighlighted: boolean = useCommandState(
@@ -40,8 +39,7 @@ export default function SpaceItem({ space }: { space: Space }) {
   });
 
   const popover = usePopover({
-    open: popoverOpen,
-    onOpenChange: ({ open }) => setPopoverOpen(open),
+    open: isHighlighted,
     positioning: {
       placement: "right-start",
       offset: {
@@ -58,17 +56,13 @@ export default function SpaceItem({ space }: { space: Space }) {
     !!space.instructions ||
     (files?.num_total_files ?? 0) > 0;
 
-  useEffect(() => {
-    setPopoverOpen(isHighlighted);
-  }, [isHighlighted]);
-
   return (
     <>
       <CommandItem
         ref={ref}
         key={space.uuid}
         className={cn(
-          "tw-relative tw-flex tw-min-h-10 tw-items-center tw-justify-between tw-gap-4 tw-text-sm",
+          "tw-relative tw-flex tw-min-h-10 tw-items-center tw-justify-between tw-gap-4 tw-text-sm tw-font-medium",
           {
             "tw-text-primary": isOnSpacePage,
           },
@@ -103,77 +97,86 @@ export default function SpaceItem({ space }: { space: Space }) {
       </CommandItem>
       {shouldShowPopover === true && (
         <PopoverRootProvider unmountOnExit lazyMount value={popover}>
-          <PopoverContent className="tw-hidden tw-max-w-[300px] tw-p-4 md:tw-block xl:tw-max-w-[500px]">
-            <div className="tw-flex tw-flex-col tw-gap-4 tw-overflow-auto">
-              {space.description && (
-                <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
-                  <div className="tw-text-sm tw-text-muted-foreground">
-                    {t(
-                      "plugin-space-navigator:spaceNavigator.spaceItem.details.description",
-                    )}
-                  </div>
-                  <div className="tw-line-clamp-1 tw-whitespace-pre-wrap">
-                    {space.description}
-                  </div>
-                </div>
-              )}
-              {space.instructions && (
-                <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
-                  <div className="tw-text-sm tw-text-muted-foreground">
-                    {t(
-                      "plugin-space-navigator:spaceNavigator.spaceItem.details.instructions",
-                    )}
+          <PopoverContent
+            portal={false}
+            className="tw-hidden tw-p-0 md:tw-block"
+          >
+            <ScrollArea>
+              <div className="tw-flex tw-max-h-[50vh] tw-max-w-[300px] tw-flex-col tw-gap-4 tw-p-4 xl:tw-max-w-[500px]">
+                {space.description && (
+                  <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
+                    <div className="tw-text-sm tw-font-medium tw-text-muted-foreground">
+                      {t(
+                        "plugin-space-navigator:spaceNavigator.spaceItem.details.description",
+                      )}
+                    </div>
+                    <div className="tw-line-clamp-1 tw-whitespace-pre-wrap">
+                      {space.description}
+                    </div>
                   </div>
-                  <div className="tw-max-h-[200px] tw-overflow-auto tw-whitespace-pre-wrap tw-rounded-md tw-bg-secondary tw-p-2">
-                    {space.instructions}
+                )}
+                {space.instructions && (
+                  <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
+                    <div className="tw-text-sm tw-font-medium tw-text-muted-foreground">
+                      {t(
+                        "plugin-space-navigator:spaceNavigator.spaceItem.details.instructions",
+                      )}
+                    </div>
+                    <ScrollArea className="tw-whitespace-pre-wrap tw-rounded-md tw-bg-secondary">
+                      <div className="tw-max-h-[200px] tw-p-2">
+                        {space.instructions}
+                      </div>
+                    </ScrollArea>
                   </div>
-                </div>
-              )}
-              {space.focused_web_config?.link_configs.length > 0 && (
-                <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
-                  <div className="tw-truncate tw-text-sm tw-text-muted-foreground">
-                    {t(
-                      "plugin-space-navigator:spaceNavigator.spaceItem.details.focusedWebLinks",
-                      {
-                        count: space.focused_web_config.link_configs.length,
-                      },
-                    )}
+                )}
+                {space.focused_web_config?.link_configs.length > 0 && (
+                  <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
+                    <div className="tw-truncate tw-text-sm tw-font-medium tw-text-muted-foreground">
+                      {t(
+                        "plugin-space-navigator:spaceNavigator.spaceItem.details.focusedWebLinks",
+                        {
+                          count: space.focused_web_config.link_configs.length,
+                        },
+                      )}
+                    </div>
+                    <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-2">
+                      {space.focused_web_config.link_configs.map(
+                        (link, idx) => (
+                          <div
+                            key={idx}
+                            className="tw-flex tw-items-center tw-gap-2"
+                          >
+                            <LuLink className="tw-size-4" />
+                            <div className="tw-line-clamp-1 tw-underline">
+                              {link.link}
+                            </div>
+                          </div>
+                        ),
+                      )}
+                    </div>
                   </div>
-                  <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-2">
-                    {space.focused_web_config.link_configs.map((link, idx) => (
-                      <div
-                        key={idx}
-                        className="tw-flex tw-items-center tw-gap-2"
-                      >
-                        <LuLink className="tw-size-4" />
-                        <div className="tw-line-clamp-1 tw-underline">
-                          {link.link}
-                        </div>
-                      </div>
+                )}
+                {files && files?.num_total_files > 0 && (
+                  <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
+                    <div className="tw-text-sm tw-font-medium tw-text-muted-foreground">
+                      {t(
+                        "plugin-space-navigator:spaceNavigator.spaceItem.details.files",
+                        {
+                          count: files.num_total_files,
+                        },
+                      )}
+                    </div>
+                    {files.files.map((file, index) => (
+                      <SpaceItemFile
+                        key={index}
+                        file={file}
+                        spaceUuid={space.uuid}
+                      />
                     ))}
                   </div>
-                </div>
-              )}
-              {files && files?.num_total_files > 0 && (
-                <div className="tw-flex tw-flex-col tw-justify-between tw-gap-2">
-                  <div className="tw-text-sm tw-text-muted-foreground">
-                    {t(
-                      "plugin-space-navigator:spaceNavigator.spaceItem.details.files",
-                      {
-                        count: files.num_total_files,
-                      },
-                    )}
-                  </div>
-                  {files.files.map((file) => (
-                    <SpaceItemFile
-                      key={file.file_uuid}
-                      file={file}
-                      spaceUuid={space.uuid}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
+                )}
+              </div>
+            </ScrollArea>
           </PopoverContent>
         </PopoverRootProvider>
       )}
diff --git a/src/features/plugins/query-box/space-navigator/SpaceNavigatorContent.tsx b/src/features/plugins/query-box/space-navigator/SpaceNavigatorContent.tsx
index c38f0075..1a4fcaff 100644
--- a/src/features/plugins/query-box/space-navigator/SpaceNavigatorContent.tsx
+++ b/src/features/plugins/query-box/space-navigator/SpaceNavigatorContent.tsx
@@ -15,6 +15,8 @@ import UiUtils from "@/utils/UiUtils";
 export default function SpaceNavigatorContent() {
   const { data: spaces, isLoading } = useQuery(pplxApiQueries.spaces);
 
+  const [searchValue, setSearchValue] = useState("");
+
   return (
     <Command
       filter={(value, search, keywords) => {
@@ -41,7 +43,12 @@ export default function SpaceNavigatorContent() {
         placeholder={t(
           "plugin-space-navigator:spaceNavigator.search.placeholder",
         )}
+        value={searchValue}
+        className={cn({
+          "tw-font-medium": !searchValue,
+        })}
         searchIcon={false}
+        onValueChange={(value) => setSearchValue(value)}
       />
       {!isLoading && (
         <CommandEmpty>
diff --git a/src/features/plugins/thread/better-message-copy-buttons/CopyButton.tsx b/src/features/plugins/thread/better-message-copy-buttons/CopyButton.tsx
index ffc93270..6e6b49e0 100644
--- a/src/features/plugins/thread/better-message-copy-buttons/CopyButton.tsx
+++ b/src/features/plugins/thread/better-message-copy-buttons/CopyButton.tsx
@@ -60,7 +60,7 @@ const BetterCopyButton = memo(function BetterCopyButton({
         </DropdownMenuTrigger>
       </Tooltip>
       {hasSources && (
-        <DropdownMenuContent>
+        <DropdownMenuContent className="tw-font-medium">
           <DropdownMenuItem
             value={"default" satisfies CopyOptions}
             className="tw-flex tw-items-center tw-gap-2"
diff --git a/src/features/plugins/thread/better-message-toolbars/explicit-model-name.ts b/src/features/plugins/thread/better-message-toolbars/explicit-model-name.ts
index bfe63a3c..4b3fe8bd 100644
--- a/src/features/plugins/thread/better-message-toolbars/explicit-model-name.ts
+++ b/src/features/plugins/thread/better-message-toolbars/explicit-model-name.ts
@@ -25,7 +25,7 @@ const handleInFlightMessage = ($answerHeading: JQuery<Element>) => {
 const createModelBadge = (modelName: string) => {
   return $(`<div>${modelName.toLocaleUpperCase()}</div>`)
     .addClass(
-      "tw-font-mono tw-animate-in tw-fade-in tw-border tw-border-border/50 tw-p-1 tw-px-2 tw-rounded-md tw-text-xs tw-bg-secondary",
+      "tw-font-mono tw-animate-in tw-fade-in tw-border tw-border-border/50 tw-p-1 tw-px-2 tw-rounded-md tw-text-xs tw-bg-secondary tw-font-medium",
     )
     .internalComponentAttr(
       DOM_INTERNAL_DATA_ATTRIBUTES_SELECTORS.THREAD.MESSAGE.TEXT_COL_CHILD
diff --git a/src/features/plugins/thread/better-message-toolbars/simplify-rewrite-dropdown.css b/src/features/plugins/thread/better-message-toolbars/simplify-rewrite-dropdown.css
index 51bd44a4..4ad9cf93 100644
--- a/src/features/plugins/thread/better-message-toolbars/simplify-rewrite-dropdown.css
+++ b/src/features/plugins/thread/better-message-toolbars/simplify-rewrite-dropdown.css
@@ -1,4 +1,5 @@
-[data-cplx-component="popper"]:has(.group\/item.md\:h-full):has(
+.duration-250.fill-mode-both
+  > .absolute.left-0.right-0.top-0:has(.group\/item.md\:h-full):has(
     svg[data-icon="copilot"]
   ) {
   .mb-xs.-mx-xs.px-xs.border-b {
diff --git a/src/features/plugins/thread/better-message-toolbars/words-and-characters-count.ts b/src/features/plugins/thread/better-message-toolbars/words-and-characters-count.ts
index 3182b437..b6103a9e 100644
--- a/src/features/plugins/thread/better-message-toolbars/words-and-characters-count.ts
+++ b/src/features/plugins/thread/better-message-toolbars/words-and-characters-count.ts
@@ -24,7 +24,7 @@ const handleInFlightMessage = ($answerHeading: JQuery<Element>) => {
 const createAnswerHeadingContainer = (content: string) => {
   return $(`<div>${content}</div>`)
     .addClass(
-      "tw-text-muted-foreground tw-italic tw-text-xs tw-ml-4 tw-text-right",
+      "tw-text-muted-foreground tw-italic tw-text-xs tw-ml-4 tw-text-right tw-font-medium",
     )
     .internalComponentAttr(
       DOM_INTERNAL_DATA_ATTRIBUTES_SELECTORS.THREAD.MESSAGE.TEXT_COL_CHILD
@@ -37,7 +37,7 @@ const createQueryHoverContainer = (content: string) => {
     `<div><span>${content}</span><div class="mx-2xs h-4 border-l border-borderMain/50 ring-borderMain/50 divide-borderMain/50 dark:divide-borderMainDark/50  dark:ring-borderMainDark/50 dark:border-borderMainDark/50 bg-transparent"></div></div>`,
   )
     .addClass(
-      "tw-ml-2 tw-text-muted-foreground tw-italic tw-text-xs tw-flex tw-items-center tw-gap-2",
+      "tw-ml-2 tw-text-muted-foreground tw-italic tw-text-xs tw-flex tw-items-center tw-gap-2 tw-font-medium",
     )
     .internalComponentAttr(
       DOM_INTERNAL_DATA_ATTRIBUTES_SELECTORS.THREAD.MESSAGE.TEXT_COL_CHILD
diff --git a/src/features/plugins/thread/canvas/components/CanvasContent.tsx b/src/features/plugins/thread/canvas/components/CanvasContent.tsx
index 80459839..7556cd60 100644
--- a/src/features/plugins/thread/canvas/components/CanvasContent.tsx
+++ b/src/features/plugins/thread/canvas/components/CanvasContent.tsx
@@ -42,7 +42,7 @@ export default function CanvasContent() {
           ? "code"
           : canvasViewMode
       }
-      className="tw-size-full tw-overflow-auto"
+      className="custom-scrollbar tw-size-full tw-overflow-auto"
     >
       <TabsContent value="code" className="tw-size-full">
         <CanvasCodeView />
diff --git a/src/features/plugins/thread/canvas/components/CodeView.tsx b/src/features/plugins/thread/canvas/components/CodeView.tsx
index 8e712430..fa0f6431 100644
--- a/src/features/plugins/thread/canvas/components/CodeView.tsx
+++ b/src/features/plugins/thread/canvas/components/CodeView.tsx
@@ -44,7 +44,7 @@ export default function CodeView() {
     <div
       id="canvas-code-view"
       className={cn(
-        "tw-h-full tw-w-max tw-min-w-full tw-text-xs [&>pre]:tw-m-0 [&>pre]:tw-size-full [&>pre]:tw-rounded-t-none",
+        "tw-h-full tw-w-max tw-min-w-full tw-text-xs [&>pre]:tw-m-0 [&>pre]:tw-size-full [&>pre]:tw-rounded-t-none [&_span.linenumber]:!tw-text-muted-foreground",
         {
           "[&_span]:tw-duration-300 [&_span]:tw-animate-in [&_span]:tw-fade-in":
             isInFlight,
diff --git a/src/features/plugins/thread/canvas/components/PrePromptInstallationDialog.tsx b/src/features/plugins/thread/canvas/components/PrePromptInstallationDialog.tsx
index 62fe5a57..9c64f19f 100644
--- a/src/features/plugins/thread/canvas/components/PrePromptInstallationDialog.tsx
+++ b/src/features/plugins/thread/canvas/components/PrePromptInstallationDialog.tsx
@@ -16,6 +16,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { toast } from "@/components/ui/use-toast";
 import { cplxApiQueries } from "@/services/cplx-api/query-keys";
 import { PluginsStatesService } from "@/services/plugins-states/plugins-states";
@@ -83,7 +84,7 @@ function CanvasPrePromptInstallationDialog() {
         navigate("/");
       }}
     >
-      <DialogContent>
+      <DialogContent className="tw-max-w-max">
         <DialogHeader>
           <DialogTitle>Install Canvas Pre-Prompt as Space</DialogTitle>
         </DialogHeader>
@@ -91,21 +92,21 @@ function CanvasPrePromptInstallationDialog() {
           You are about to install the Canvas Pre-Prompt as a Perplexity&apos;s
           Space. This will enable advanced features for the Canvas plugin.
         </DialogDescription>
-        <div className="tw-flex tw-max-h-[80%] tw-flex-col tw-gap-2 tw-overflow-y-auto">
+        <div className="tw-flex tw-w-full tw-flex-col tw-gap-2">
           <div className="tw-text-sm tw-text-muted-foreground">
             For reference, here is the prompt:
           </div>
-          <div className="tw-h-[500px] tw-max-h-[500px] tw-overflow-y-auto tw-whitespace-pre-line tw-rounded-md tw-border tw-border-border/50 tw-bg-secondary tw-p-4 tw-text-sm tw-text-secondary-foreground">
+          <ScrollArea className="tw-h-[500px] tw-w-full tw-rounded-md tw-border tw-border-border/50 tw-bg-secondary tw-text-sm tw-text-secondary-foreground">
             {isFetching && !canvasInstruction && (
               <div className="tw-flex tw-flex-col tw-gap-2">
-                <p className="tw-text-sm tw-text-muted-foreground">
+                <p className="tw-p-4 tw-text-sm tw-text-muted-foreground">
                   Fetching the Canvas Pre-Prompt, please wait...
                 </p>
               </div>
             )}
             {isError && (
               <div className="tw-flex tw-flex-col tw-gap-2">
-                <p className="tw-text-sm tw-text-muted-foreground">
+                <p className="tw-p-4 tw-text-sm tw-text-muted-foreground">
                   Failed to fetch the Canvas Pre-Prompt.
                 </p>
               </div>
@@ -113,13 +114,15 @@ function CanvasPrePromptInstallationDialog() {
             {canvasInstruction && (
               <>
                 <CopyButton
-                  className="tw-float-right"
+                  className="tw-float-right tw-mr-4 tw-mt-4"
                   content={canvasInstruction}
                 />
-                {canvasInstruction}
+                <div className="tw-max-w-full tw-whitespace-pre-line tw-break-words tw-p-4">
+                  {canvasInstruction}
+                </div>
               </>
             )}
-          </div>
+          </ScrollArea>
         </div>
         {versions?.canvasInstructionLastUpdated != null && (
           <div className="tw-text-sm tw-text-muted-foreground">
diff --git a/src/features/plugins/thread/export-thread/ExportButton.tsx b/src/features/plugins/thread/export-thread/ExportButton.tsx
index 7628e276..94a89283 100644
--- a/src/features/plugins/thread/export-thread/ExportButton.tsx
+++ b/src/features/plugins/thread/export-thread/ExportButton.tsx
@@ -106,7 +106,7 @@ const ExportButton = memo(function ExportButton() {
           {isFetching ? defaultIdleText : (copyConfirmText ?? defaultIdleText)}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent className="tw-font-medium">
         <DropdownMenuItem value="default">
           <BiLogoMarkdown className="tw-mr-2 tw-size-4" />
           <span>{t("plugin-export-thread:exportButton.options.default")}</span>
@@ -128,7 +128,7 @@ const ExportButton = memo(function ExportButton() {
               {t("plugin-export-thread:exportButton.options.download")}
             </span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent className="tw-font-medium">
             <DropdownMenuItem value="default">
               <BiLogoMarkdown className="tw-mr-2 tw-size-4" />
               <span>
diff --git a/src/services/cs-loader-registry.ts b/src/services/cs-loader-registry.ts
index dff5ec6e..6e4e13b1 100644
--- a/src/services/cs-loader-registry.ts
+++ b/src/services/cs-loader-registry.ts
@@ -71,7 +71,8 @@ class CsLoaderRegistry {
     if (
       APP_CONFIG.IS_DEV &&
       isInContentScript() &&
-      (!isMainWorldContext() && process.env.NODE_ENV !== "test")
+      !isMainWorldContext() &&
+      process.env.NODE_ENV !== "test"
     ) {
       setTimeout(() => {
         for (const loaderId of LOADER_IDS) {
diff --git a/src/services/pplx-api/pplx-api.ts b/src/services/pplx-api/pplx-api.ts
index fc2232e0..7fc6ac81 100644
--- a/src/services/pplx-api/pplx-api.ts
+++ b/src/services/pplx-api/pplx-api.ts
@@ -168,7 +168,11 @@ export class PplxApiService {
         ),
       );
 
-    return (await parseRawHtml()) ?? (await fetchViaApi());
+    if (searchValue.length > 0) {
+      return await fetchViaApi();
+    } else {
+      return (await parseRawHtml()) ?? (await fetchViaApi());
+    }
   }
 
   static async fetchSpaces(): Promise<Space[]> {
diff --git a/src/utils/dom-selectors.ts b/src/utils/dom-selectors.ts
index d8b5a530..4bc0db0e 100644
--- a/src/utils/dom-selectors.ts
+++ b/src/utils/dom-selectors.ts
@@ -54,8 +54,7 @@ export const DOM_SELECTORS = {
       },
     },
     POPPER: {
-      MOBILE: ".duration-250.fill-mode-both.fixed.bottom-0.left-0",
-      DESKTOP: ".duration-250.fill-mode-both",
+      DESKTOP: ".duration-250.fill-mode-both>.absolute.left-0.right-0.top-0",
     },
   },
   HOME: {