From 2b2a4c858a1679fda786a5f3502ac38e009a4f3b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 17 Feb 2026 03:25:24 +0530
Subject: [PATCH] refactor: update report panel and toolbar components for
 improved layout and accessibility, including enhanced styling and conditional
 rendering

---
 .../components/report-panel/report-panel.tsx  |   5 +-
 surfsense_web/components/ui/editor.tsx        |   6 +-
 .../components/ui/fixed-toolbar-buttons.tsx   | 183 +++++++++---------
 .../components/ui/insert-toolbar-button.tsx   |   2 +-
 .../ui/turn-into-toolbar-button.tsx           |   4 +-
 5 files changed, 102 insertions(+), 98 deletions(-)

diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
index 7200e1003..780af9cac 100644
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -8,7 +8,7 @@ import { z } from "zod";
 import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { PlateEditor } from "@/components/editor/plate-editor";
 import { Button } from "@/components/ui/button";
-import { Drawer, DrawerContent, DrawerHandle } from "@/components/ui/drawer";
+import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -499,8 +499,9 @@ function MobileReportDrawer() {
 			}}
 			shouldScaleBackground={false}
 		>
-			<DrawerContent className="h-[90vh] max-h-[90vh] z-80" overlayClassName="z-80">
+			<DrawerContent className="h-[90vh] max-h-[90vh] z-80 !rounded-none border-none" overlayClassName="z-80">
 				<DrawerHandle />
+				<DrawerTitle className="sr-only">{panelState.title || "Report"}</DrawerTitle>
 				<div className="min-h-0 flex-1 flex flex-col overflow-hidden">
 					<ReportPanelContent
 						reportId={panelState.reportId}
diff --git a/surfsense_web/components/ui/editor.tsx b/surfsense_web/components/ui/editor.tsx
index e609fa72c..185327023 100644
--- a/surfsense_web/components/ui/editor.tsx
+++ b/surfsense_web/components/ui/editor.tsx
@@ -77,9 +77,9 @@ const editorVariants = cva(
           'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',
         comment: cn('rounded-none border-none bg-transparent text-sm'),
         default:
-          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
-        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
-        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',
+          'size-full px-6 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        demo: 'size-full px-6 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        fullWidth: 'size-full px-6 pt-4 pb-72 text-base sm:px-24',
         none: '',
         select: 'px-3 py-2 text-base data-readonly:w-fit',
       },
diff --git a/surfsense_web/components/ui/fixed-toolbar-buttons.tsx b/surfsense_web/components/ui/fixed-toolbar-buttons.tsx
index 91fbdb306..83322cfcc 100644
--- a/surfsense_web/components/ui/fixed-toolbar-buttons.tsx
+++ b/surfsense_web/components/ui/fixed-toolbar-buttons.tsx
@@ -32,104 +32,107 @@ export function FixedToolbarButtons() {
   const { onSave, hasUnsavedChanges, isSaving, canToggleMode } = useEditorSave();
 
   return (
-    <div className="flex w-full flex-wrap">
-      {!readOnly && (
-        <>
+    <div className="flex w-full items-center">
+      {/* Scrollable editing buttons */}
+      <div className="flex flex-1 min-w-0 overflow-x-auto scrollbar-hide">
+        {!readOnly && (
+          <>
+            <ToolbarGroup>
+              <ToolbarButton
+                tooltip="Undo (⌘+Z)"
+                onClick={() => {
+                  editor.undo();
+                  editor.tf.focus();
+                }}
+              >
+                <UndoIcon />
+              </ToolbarButton>
+
+              <ToolbarButton
+                tooltip="Redo (⌘+⇧+Z)"
+                onClick={() => {
+                  editor.redo();
+                  editor.tf.focus();
+                }}
+              >
+                <RedoIcon />
+              </ToolbarButton>
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <InsertToolbarButton />
+              <TurnIntoToolbarButton />
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
+                <BoldIcon />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
+                <ItalicIcon />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton
+                nodeType={KEYS.underline}
+                tooltip="Underline (⌘+U)"
+              >
+                <UnderlineIcon />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton
+                nodeType={KEYS.strikethrough}
+                tooltip="Strikethrough (⌘+⇧+M)"
+              >
+                <StrikethroughIcon />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
+                <Code2Icon />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton
+                nodeType={KEYS.highlight}
+                tooltip="Highlight (⌘+⇧+H)"
+              >
+                <HighlighterIcon />
+              </MarkToolbarButton>
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <LinkToolbarButton />
+            </ToolbarGroup>
+          </>
+        )}
+      </div>
+
+      {/* Fixed right-side buttons (Save + Mode) */}
+      <div className="flex shrink-0 items-center">
+        {/* Save button — only in edit mode with unsaved changes */}
+        {!readOnly && onSave && hasUnsavedChanges && (
           <ToolbarGroup>
             <ToolbarButton
-              tooltip="Undo (⌘+Z)"
-              onClick={() => {
-                editor.undo();
-                editor.tf.focus();
-              }}
+              tooltip={isSaving ? 'Saving...' : 'Save (⌘+S)'}
+              onClick={onSave}
+              disabled={isSaving}
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
             >
-              <UndoIcon />
-            </ToolbarButton>
-
-            <ToolbarButton
-              tooltip="Redo (⌘+⇧+Z)"
-              onClick={() => {
-                editor.redo();
-                editor.tf.focus();
-              }}
-            >
-              <RedoIcon />
+              {isSaving ? (
+                <Spinner size="xs" />
+              ) : (
+                <SaveIcon />
+              )}
             </ToolbarButton>
           </ToolbarGroup>
+        )}
 
+        {/* Mode toggle */}
+        {canToggleMode && (
           <ToolbarGroup>
-            <InsertToolbarButton />
-            <TurnIntoToolbarButton />
+            <ModeToolbarButton />
           </ToolbarGroup>
-
-          <ToolbarGroup>
-            <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
-              <BoldIcon />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
-              <ItalicIcon />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.underline}
-              tooltip="Underline (⌘+U)"
-            >
-              <UnderlineIcon />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.strikethrough}
-              tooltip="Strikethrough (⌘+⇧+M)"
-            >
-              <StrikethroughIcon />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
-              <Code2Icon />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.highlight}
-              tooltip="Highlight (⌘+⇧+H)"
-            >
-              <HighlighterIcon />
-            </MarkToolbarButton>
-          </ToolbarGroup>
-
-          <ToolbarGroup>
-            <LinkToolbarButton />
-          </ToolbarGroup>
-
-        </>
-      )}
-
-      <div className="grow" />
-
-      {/* Save button — only in edit mode with unsaved changes */}
-      {!readOnly && onSave && hasUnsavedChanges && (
-        <ToolbarGroup>
-          <ToolbarButton
-            tooltip={isSaving ? 'Saving...' : 'Save (⌘+S)'}
-            onClick={onSave}
-            disabled={isSaving}
-            className="bg-primary text-primary-foreground hover:bg-primary/90"
-          >
-            {isSaving ? (
-              <Spinner size="xs" />
-            ) : (
-              <SaveIcon />
-            )}
-          </ToolbarButton>
-        </ToolbarGroup>
-      )}
-
-      {/* Mode toggle */}
-      {canToggleMode && (
-        <ToolbarGroup>
-          <ModeToolbarButton />
-        </ToolbarGroup>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/surfsense_web/components/ui/insert-toolbar-button.tsx b/surfsense_web/components/ui/insert-toolbar-button.tsx
index 4abf6a57b..666704c0c 100644
--- a/surfsense_web/components/ui/insert-toolbar-button.tsx
+++ b/surfsense_web/components/ui/insert-toolbar-button.tsx
@@ -195,7 +195,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700"
+        className="z-[100] flex max-h-[60vh] min-w-0 flex-col overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700"
         align="start"
       >
         {groups.map(({ group, items }) => (
diff --git a/surfsense_web/components/ui/turn-into-toolbar-button.tsx b/surfsense_web/components/ui/turn-into-toolbar-button.tsx
index 4b8c80c8e..94b77529d 100644
--- a/surfsense_web/components/ui/turn-into-toolbar-button.tsx
+++ b/surfsense_web/components/ui/turn-into-toolbar-button.tsx
@@ -145,7 +145,7 @@ export function TurnIntoToolbarButton({ tooltip = 'Turn into', ...props }: Dropd
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
       <DropdownMenuTrigger asChild>
         <ToolbarButton
-          className="min-w-[125px]"
+          className="min-w-[80px] sm:min-w-[125px]"
           pressed={open}
           tooltip={tooltip}
           isDropdown
@@ -155,7 +155,7 @@ export function TurnIntoToolbarButton({ tooltip = 'Turn into', ...props }: Dropd
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="ignore-click-outside/toolbar min-w-0 max-h-[350px] overflow-y-scroll dark:bg-neutral-800 dark:border dark:border-neutral-700"
+        className="z-[100] ignore-click-outside/toolbar min-w-0 max-h-[60vh] overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700"
         onCloseAutoFocus={(e) => {
           e.preventDefault();
           editor.tf.focus();