From f172de38901ccdd3f9461d49661a7e4662c9f06d Mon Sep 17 00:00:00 2001
From: Ankit-Nandy-afk <janedoe01100100@gmail.com>
Date: Wed, 26 Aug 2026 01:21:19 +0530
Subject: [PATCH 1/6] fix(editor): raise tooltip z-index to prevent overlap in
 fullscreen mode

---
 app/src/components/ui/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/ui/tooltip.tsx b/app/src/components/ui/tooltip.tsx
index 0444a9a2..cf44b0ce 100644
--- a/app/src/components/ui/tooltip.tsx
+++ b/app/src/components/ui/tooltip.tsx
@@ -40,7 +40,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-99999 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

From c62bbfc268047c370bfb82c1f46e88d7e6a78f79 Mon Sep 17 00:00:00 2001
From: Ankit-Nandy-afk <janedoe01100100@gmail.com>
Date: Fri, 28 Aug 2026 21:14:14 +0530
Subject: [PATCH 2/6] fix(editor): blur bleed

---
 app/src/components/ui/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/ui/tooltip.tsx b/app/src/components/ui/tooltip.tsx
index cf44b0ce..9a4d1214 100644
--- a/app/src/components/ui/tooltip.tsx
+++ b/app/src/components/ui/tooltip.tsx
@@ -40,7 +40,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-99999 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-[99999] inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) [transform:translateZ(0)] items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background [will-change:transform] has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

From 8564a29b57d76a1b84e2cd9350f992de0ff3a328 Mon Sep 17 00:00:00 2001
From: Ankit-Nandy-afk <janedoe01100100@gmail.com>
Date: Fri, 28 Aug 2026 21:33:05 +0530
Subject: [PATCH 3/6] fix(editor): isolate toolbar

---
 app/src/components/contribute/editor/Editor.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/components/contribute/editor/Editor.css b/app/src/components/contribute/editor/Editor.css
index f8111dca..952198d1 100644
--- a/app/src/components/contribute/editor/Editor.css
+++ b/app/src/components/contribute/editor/Editor.css
@@ -988,6 +988,7 @@ body.editor-fullscreen [class*="_toolbarRoot"] {
     inset 0 1px 0 hsl(var(--foreground) / 0.05),
     0 1px 3px rgba(0, 0, 0, 0.04) !important;
   z-index: 50 !important;
+  isolation: isolate !important;
   flex-shrink: 0 !important;
   transform: none !important;
 }

From db3bfe28436906077a0d44c1a71f398265a4c656 Mon Sep 17 00:00:00 2001
From: Ankit-Nandy-afk <janedoe01100100@gmail.com>
Date: Sat, 29 Aug 2026 01:44:18 +0530
Subject: [PATCH 4/6] fix(editor): isolate toolbar

---
 app/src/components/contribute/editor/Editor.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/src/components/contribute/editor/Editor.css b/app/src/components/contribute/editor/Editor.css
index 952198d1..1f08ca68 100644
--- a/app/src/components/contribute/editor/Editor.css
+++ b/app/src/components/contribute/editor/Editor.css
@@ -982,13 +982,12 @@ body.editor-fullscreen [class*="_toolbarRoot"] {
   border-right: none !important;
   border-bottom: 1px solid hsl(var(--border) / 0.6) !important;
   background-color: hsl(var(--card) / 0.85) !important;
-  backdrop-filter: blur(8px) !important;
-  -webkit-backdrop-filter: blur(8px) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
   box-shadow:
     inset 0 1px 0 hsl(var(--foreground) / 0.05),
     0 1px 3px rgba(0, 0, 0, 0.04) !important;
   z-index: 50 !important;
-  isolation: isolate !important;
   flex-shrink: 0 !important;
   transform: none !important;
 }

From 421d94823b9c3be3972e3ec80d3399cabc96524e Mon Sep 17 00:00:00 2001
From: Ankit-Nandy-afk <janedoe01100100@gmail.com>
Date: Sat, 29 Aug 2026 01:45:43 +0530
Subject: [PATCH 5/6] fix(editor): fix blur

---
 app/src/components/ui/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/ui/tooltip.tsx b/app/src/components/ui/tooltip.tsx
index 9a4d1214..0444a9a2 100644
--- a/app/src/components/ui/tooltip.tsx
+++ b/app/src/components/ui/tooltip.tsx
@@ -40,7 +40,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-[99999] inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) [transform:translateZ(0)] items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background [will-change:transform] has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

From 40cf366ed28f740f3a9910dea584fc2c99f0a5ab Mon Sep 17 00:00:00 2001
From: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
Date: Thu, 3 Sep 2026 20:12:45 +0100
Subject: [PATCH 6/6] feat: update tooltip on editor toolbar for consistent
 look

Signed-off-by: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
---
 .../contribute/editor/EditorToolbar.tsx       | 765 ++++++++++--------
 .../contribute/editor/IndentButtons.tsx       |  55 +-
 2 files changed, 462 insertions(+), 358 deletions(-)

diff --git a/app/src/components/contribute/editor/EditorToolbar.tsx b/app/src/components/contribute/editor/EditorToolbar.tsx
index 2f3f0907..7418f766 100644
--- a/app/src/components/contribute/editor/EditorToolbar.tsx
+++ b/app/src/components/contribute/editor/EditorToolbar.tsx
@@ -56,6 +56,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.tsx";
 
 function CustomBlockTypeSelect() {
   const [open, setOpen] = useState(false);
@@ -110,40 +116,58 @@ function CustomBlockTypeSelect() {
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className="toolbar-dropdown-trigger min-w-[100px] shrink-0 justify-between"
-          title="Select Block Type"
-        >
-          <span className="truncate text-xs font-medium">
-            {getLabel(currentBlockType)}
-          </span>
-          <ChevronDown className="ml-1 h-3 w-3 shrink-0 opacity-60" />
-        </button>
-      </PopoverTrigger>
+      <Tooltip>
+        <PopoverTrigger asChild>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="toolbar-dropdown-trigger min-w-[100px] shrink-0 justify-between"
+              aria-label="Select Block Type"
+            >
+              <span className="truncate text-xs font-medium">
+                {getLabel(currentBlockType)}
+              </span>
+              <ChevronDown className="ml-1 h-3 w-3 shrink-0 opacity-60" />
+            </button>
+          </TooltipTrigger>
+        </PopoverTrigger>
+
+        <TooltipContent>Select Block Type</TooltipContent>
+      </Tooltip>
+
       <PopoverContent
         className="toolbar-popover-content w-40"
         align="start"
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
         <div className="toolbar-popover-header">Block Type</div>
+
         <button
           type="button"
-          className={`toolbar-popover-item ${currentBlockType === "paragraph" || !currentBlockType ? "bg-accent font-semibold text-accent-foreground" : ""}`}
+          className={`toolbar-popover-item ${
+            currentBlockType === "paragraph" || !currentBlockType
+              ? "bg-accent font-semibold text-accent-foreground"
+              : ""
+          }`}
           onClick={() => handleSelect("paragraph")}
         >
           <Type className="h-3.5 w-3.5 opacity-70" />
           <span>Paragraph</span>
         </button>
+
         {hasHeadings &&
           allowedHeadingLevels.map((lvl) => {
             const hTag = `h${lvl}`;
+
             return (
               <button
                 key={hTag}
                 type="button"
-                className={`toolbar-popover-item ${currentBlockType === hTag ? "bg-accent font-semibold text-accent-foreground" : ""}`}
+                className={`toolbar-popover-item ${
+                  currentBlockType === hTag
+                    ? "bg-accent font-semibold text-accent-foreground"
+                    : ""
+                }`}
                 onClick={() => handleSelect(hTag)}
               >
                 <span className="w-3.5 text-center font-mono text-xs font-bold">
@@ -153,10 +177,15 @@ function CustomBlockTypeSelect() {
               </button>
             );
           })}
+
         {hasQuote && (
           <button
             type="button"
-            className={`toolbar-popover-item ${currentBlockType === "quote" ? "bg-accent font-semibold text-accent-foreground" : ""}`}
+            className={`toolbar-popover-item ${
+              currentBlockType === "quote"
+                ? "bg-accent font-semibold text-accent-foreground"
+                : ""
+            }`}
             onClick={() => handleSelect("quote")}
           >
             <Quote className="h-3.5 w-3.5 opacity-70" />
@@ -295,371 +324,431 @@ export default function EditorToolbar({
 
   return (
     <div className="editor-toolbar-wrapper">
-      <div className="mdxeditor-toolbar-custom">
-        <MarkdownLinkImageShortcutListener />
-        <H1RestrictionListener onH1Attempted={onH1Attempted} />
-        <CodeBlockShortcutListener />
-        <CalloutShortcutListener />
-        <TabShortcutListener />
-        <UndoRedo />
-        <div className="mdx-toolbar-divider"></div>
-        <BoldItalicUnderlineToggles />
-        <StrikeThroughSupSubToggles options={["Strikethrough"]} />
-        <CodeToggle />
-        <div className="mdx-toolbar-divider"></div>
-        <CustomBlockTypeSelect />
-        <div className="mdx-toolbar-divider"></div>
-        <ListsToggle />
-        <IndentButtons />
-
-        <div className="mdx-toolbar-divider"></div>
-
-        {/* Math Dropdown using Popover */}
-        <Popover>
-          <PopoverTrigger asChild>
-            <button
-              type="button"
-              className="toolbar-dropdown-trigger shrink-0"
-              title="Insert LaTeX Math Equation"
-            >
-              <span className="font-serif font-bold italic">f(x)</span>
-              <span>Math</span>
-              <ChevronDown className="h-3 w-3 opacity-60" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="toolbar-popover-content"
-            align="start"
-            onCloseAutoFocus={(e) => e.preventDefault()}
-          >
-            <div className="toolbar-popover-header">LaTeX Equations</div>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() => {
-                editorRef.current?.focus();
-                setTimeout(() => {
-                  inlineMathRef.current?.querySelector("button")?.click();
-                }, 10);
-              }}
-            >
-              <span className="w-4 text-center font-serif font-bold text-muted-foreground">
-                x
-              </span>
-              <span>Inline Equation</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() => {
-                editorRef.current?.focus();
-                setTimeout(() => {
-                  blockMathRef.current?.querySelector("button")?.click();
-                }, 10);
-              }}
-            >
-              <span className="w-4 text-center font-serif font-bold text-muted-foreground italic">
-                $$
-              </span>
-              <span>Block Equation</span>
-            </button>
-          </PopoverContent>
-        </Popover>
+      <TooltipProvider>
+        <div className="mdxeditor-toolbar-custom">
+          <MarkdownLinkImageShortcutListener />
+          <H1RestrictionListener onH1Attempted={onH1Attempted} />
+          <CodeBlockShortcutListener />
+          <CalloutShortcutListener />
+          <TabShortcutListener />
+          <UndoRedo />
+          <div className="mdx-toolbar-divider" />
+          <BoldItalicUnderlineToggles />
+          <StrikeThroughSupSubToggles options={["Strikethrough"]} />
+          <CodeToggle />
+          <div className="mdx-toolbar-divider" />
+          <CustomBlockTypeSelect />
+          <div className="mdx-toolbar-divider" />
+          <ListsToggle />
+          <IndentButtons />
 
-        {/* Insert Dropdown using Popover */}
-        <Popover>
-          <PopoverTrigger asChild>
-            <button
-              type="button"
-              className="toolbar-dropdown-trigger shrink-0"
-              title="Insert Element"
-            >
-              <Plus className="h-3.5 w-3.5" />
-              <span>Insert</span>
-              <ChevronDown className="h-3 w-3 opacity-60" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="toolbar-popover-content"
-            align="start"
-            onCloseAutoFocus={(e) => e.preventDefault()}
-          >
-            <div className="toolbar-popover-header">Elements</div>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() => {
-                editorRef.current?.focus();
-                setTimeout(() => {
-                  tableRef.current?.querySelector("button")?.click();
-                }, 10);
-              }}
-            >
-              <Table className="h-3.5 w-3.5 text-muted-foreground" />
-              <span>Table</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() => {
-                editorRef.current?.focus();
-                setTimeout(() => {
-                  codeBlockRef.current?.querySelector("button")?.click();
-                }, 10);
-              }}
-            >
-              <Code className="h-3.5 w-3.5 text-muted-foreground" />
-              <span>Code Block</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() => {
-                editorRef.current?.focus();
-                setTimeout(() => {
-                  linkRef.current?.querySelector("button")?.click();
-                }, 10);
-              }}
-            >
-              <LinkIcon className="h-3.5 w-3.5 text-muted-foreground" />
-              <span>Link</span>
-            </button>
-            <div className="my-1 h-px bg-border" />
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() => {
-                editorRef.current?.focus();
-                setTimeout(() => {
-                  thematicBreakRef.current?.querySelector("button")?.click();
-                }, 10);
-              }}
-            >
-              <Minus className="h-3.5 w-3.5 text-muted-foreground" />
-              <span>Horizontal Line</span>
-            </button>
-            <div className="my-1 h-px bg-border" />
-            <div className="toolbar-popover-header">Callouts</div>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() =>
-                insertDirective({ type: "containerDirective", name: "info" })
-              }
-            >
-              <Info className="h-3.5 w-3.5 text-blue-500" />
-              <span>Info Callout</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() =>
-                insertDirective({ type: "containerDirective", name: "note" })
-              }
-            >
-              <Info className="h-3.5 w-3.5 text-blue-500" />
-              <span>Note Callout</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() =>
-                insertDirective({ type: "containerDirective", name: "tip" })
-              }
-            >
-              <Lightbulb className="h-3.5 w-3.5 text-green-500" />
-              <span>Tip Callout</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() =>
-                insertDirective({ type: "containerDirective", name: "caution" })
-              }
-            >
-              <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
-              <span>Caution Callout</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() =>
-                insertDirective({ type: "containerDirective", name: "warning" })
-              }
-            >
-              <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
-              <span>Warning Callout</span>
-            </button>
-            <button
-              type="button"
-              className="toolbar-popover-item"
-              onClick={() =>
-                insertDirective({ type: "containerDirective", name: "danger" })
-              }
-            >
-              <AlertCircle className="h-3.5 w-3.5 text-red-500" />
-              <span>Danger Callout</span>
-            </button>
-          </PopoverContent>
-        </Popover>
+          <div className="mdx-toolbar-divider" />
 
-        <div className="mdx-toolbar-divider"></div>
+          {/* Math Dropdown using Popover */}
+          <Popover>
+            <Tooltip>
+              <PopoverTrigger asChild>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="toolbar-dropdown-trigger shrink-0"
+                  >
+                    <span className="font-serif font-bold italic">f(x)</span>
+                    <span>Math</span>
+                    <ChevronDown className="h-3 w-3 opacity-60" />
+                  </button>
+                </TooltipTrigger>
+              </PopoverTrigger>
 
-        {/* Desktop Actions & Sharing Button Group */}
-        <div className="ml-auto hidden shrink-0 items-center gap-1 p-0.5 sm:flex">
-          <button
-            type="button"
-            onClick={handleCopy}
-            title="Copy Markdown to Clipboard"
-            aria-label="Copy Markdown to Clipboard"
-          >
-            {copied ? <Check className="text-green-500" /> : <Copy />}
-          </button>
-          <button
-            type="button"
-            onClick={handleDownload}
-            title="Download as .md file"
-            aria-label="Download as .md file"
-          >
-            <Download />
-          </button>
-          <button
-            type="button"
-            onClick={handleImportClick}
-            title="Import .md file"
-            aria-label="Import .md file"
-          >
-            <Upload />
-          </button>
-          <button
-            type="button"
-            onClick={() => setShowWordCount((visible) => !visible)}
-            title={showWordCount ? "Hide Word Count" : "Show Word Count"}
-            aria-label={showWordCount ? "Hide Word Count" : "Show Word Count"}
-          >
-            {showWordCount ? <Eye /> : <EyeOff />}
-          </button>
-          <div className="mx-1 h-4 w-px bg-border"></div>
-          <button
-            type="button"
-            onClick={toggleFullScreen}
-            title={isFullScreen ? "Exit Full Screen" : "Full Screen"}
-            aria-label="Toggle Full Screen"
-          >
-            {isFullScreen ? <Minimize /> : <Maximize />}
-          </button>
-        </div>
+              <TooltipContent>Insert LaTeX Math Equation</TooltipContent>
+            </Tooltip>
 
-        {/* Mobile More Actions Menu */}
-        <div className="ml-auto flex shrink-0 items-center sm:hidden">
-          <Popover>
-            <PopoverTrigger asChild>
+            <PopoverContent
+              className="toolbar-popover-content"
+              align="start"
+              onCloseAutoFocus={(e) => e.preventDefault()}
+            >
+              <div className="toolbar-popover-header">LaTeX Equations</div>
+              <button
+                type="button"
+                className="toolbar-popover-item"
+                onClick={() => {
+                  editorRef.current?.focus();
+                  setTimeout(() => {
+                    inlineMathRef.current?.querySelector("button")?.click();
+                  }, 10);
+                }}
+              >
+                <span className="w-4 text-center font-serif font-bold text-muted-foreground">
+                  x
+                </span>
+                <span>Inline Equation</span>
+              </button>
               <button
                 type="button"
-                className="toolbar-dropdown-trigger shrink-0"
-                title="More Actions"
-                aria-label="More Actions"
+                className="toolbar-popover-item"
+                onClick={() => {
+                  editorRef.current?.focus();
+                  setTimeout(() => {
+                    blockMathRef.current?.querySelector("button")?.click();
+                  }, 10);
+                }}
               >
-                <MoreHorizontal className="h-4 w-4" />
+                <span className="w-4 text-center font-serif font-bold text-muted-foreground italic">
+                  $$
+                </span>
+                <span>Block Equation</span>
               </button>
-            </PopoverTrigger>
+            </PopoverContent>
+          </Popover>
+
+          {/* Insert Dropdown using Popover */}
+          <Popover>
+            <Tooltip>
+              <PopoverTrigger asChild>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="toolbar-dropdown-trigger shrink-0"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    <span>Insert</span>
+                    <ChevronDown className="h-3 w-3 opacity-60" />
+                  </button>
+                </TooltipTrigger>
+              </PopoverTrigger>
+
+              <TooltipContent>Insert LaTeX Math Equation</TooltipContent>
+            </Tooltip>
+
             <PopoverContent
-              className="toolbar-popover-content w-48"
-              align="end"
+              className="toolbar-popover-content"
+              align="start"
               onCloseAutoFocus={(e) => e.preventDefault()}
             >
-              <div className="toolbar-popover-header">Actions</div>
+              <div className="toolbar-popover-header">Elements</div>
               <button
                 type="button"
                 className="toolbar-popover-item"
-                onClick={() => setShowWordCount((visible) => !visible)}
+                onClick={() => {
+                  editorRef.current?.focus();
+                  setTimeout(() => {
+                    tableRef.current?.querySelector("button")?.click();
+                  }, 10);
+                }}
               >
-                {showWordCount ? (
-                  <Eye className="h-3.5 w-3.5 text-muted-foreground" />
-                ) : (
-                  <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
-                )}
-
-                <span>
-                  {showWordCount ? "Hide word count" : "Show word count"}
-                </span>
+                <Table className="h-3.5 w-3.5 text-muted-foreground" />
+                <span>Table</span>
               </button>
               <button
                 type="button"
                 className="toolbar-popover-item"
-                onClick={handleCopy}
+                onClick={() => {
+                  editorRef.current?.focus();
+                  setTimeout(() => {
+                    codeBlockRef.current?.querySelector("button")?.click();
+                  }, 10);
+                }}
               >
-                {copied ? (
-                  <Check className="h-3.5 w-3.5 text-green-500" />
-                ) : (
-                  <Copy className="h-3.5 w-3.5 text-muted-foreground" />
-                )}
-                <span>{copied ? "Copied!" : "Copy Markdown"}</span>
+                <Code className="h-3.5 w-3.5 text-muted-foreground" />
+                <span>Code Block</span>
               </button>
               <button
                 type="button"
                 className="toolbar-popover-item"
-                onClick={handleDownload}
+                onClick={() => {
+                  editorRef.current?.focus();
+                  setTimeout(() => {
+                    linkRef.current?.querySelector("button")?.click();
+                  }, 10);
+                }}
               >
-                <Download className="h-3.5 w-3.5 text-muted-foreground" />
-                <span>Download .md</span>
+                <LinkIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                <span>Link</span>
               </button>
+              <div className="my-1 h-px bg-border" />
               <button
                 type="button"
                 className="toolbar-popover-item"
-                onClick={handleImportClick}
+                onClick={() => {
+                  editorRef.current?.focus();
+                  setTimeout(() => {
+                    thematicBreakRef.current?.querySelector("button")?.click();
+                  }, 10);
+                }}
               >
-                <Upload className="h-3.5 w-3.5 text-muted-foreground" />
-                <span>Import .md</span>
+                <Minus className="h-3.5 w-3.5 text-muted-foreground" />
+                <span>Horizontal Line</span>
               </button>
-
               <div className="my-1 h-px bg-border" />
+              <div className="toolbar-popover-header">Callouts</div>
               <button
                 type="button"
                 className="toolbar-popover-item"
-                onClick={toggleFullScreen}
+                onClick={() =>
+                  insertDirective({ type: "containerDirective", name: "info" })
+                }
               >
-                {isFullScreen ? (
-                  <Minimize className="h-3.5 w-3.5 text-muted-foreground" />
-                ) : (
-                  <Maximize className="h-3.5 w-3.5 text-muted-foreground" />
-                )}
-                <span>{isFullScreen ? "Exit Fullscreen" : "Fullscreen"}</span>
+                <Info className="h-3.5 w-3.5 text-blue-500" />
+                <span>Info Callout</span>
+              </button>
+              <button
+                type="button"
+                className="toolbar-popover-item"
+                onClick={() =>
+                  insertDirective({ type: "containerDirective", name: "note" })
+                }
+              >
+                <Info className="h-3.5 w-3.5 text-blue-500" />
+                <span>Note Callout</span>
+              </button>
+              <button
+                type="button"
+                className="toolbar-popover-item"
+                onClick={() =>
+                  insertDirective({ type: "containerDirective", name: "tip" })
+                }
+              >
+                <Lightbulb className="h-3.5 w-3.5 text-green-500" />
+                <span>Tip Callout</span>
+              </button>
+              <button
+                type="button"
+                className="toolbar-popover-item"
+                onClick={() =>
+                  insertDirective({
+                    type: "containerDirective",
+                    name: "caution",
+                  })
+                }
+              >
+                <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
+                <span>Caution Callout</span>
+              </button>
+              <button
+                type="button"
+                className="toolbar-popover-item"
+                onClick={() =>
+                  insertDirective({
+                    type: "containerDirective",
+                    name: "warning",
+                  })
+                }
+              >
+                <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
+                <span>Warning Callout</span>
+              </button>
+              <button
+                type="button"
+                className="toolbar-popover-item"
+                onClick={() =>
+                  insertDirective({
+                    type: "containerDirective",
+                    name: "danger",
+                  })
+                }
+              >
+                <AlertCircle className="h-3.5 w-3.5 text-red-500" />
+                <span>Danger Callout</span>
               </button>
             </PopoverContent>
           </Popover>
-        </div>
 
-        {/* Hidden native MDXEditor buttons so they still receive their reactive contexts */}
-        <div style={{ display: "none" }}>
-          <span ref={tableRef}>
-            <InsertTable />
-          </span>
-          <span ref={codeBlockRef}>
-            <InsertCodeBlock />
-          </span>
-          <span ref={thematicBreakRef}>
-            <InsertThematicBreak />
-          </span>
-          <span ref={linkRef}>
-            <CreateLink />
-          </span>
-          <span ref={inlineMathRef}>
-            <InsertInlineMath />
-          </span>
-          <span ref={blockMathRef}>
-            <InsertBlockMath />
-          </span>
+          <div className="mdx-toolbar-divider" />
+
+          {/* Desktop Actions & Sharing Button Group */}
+          <div className="ml-auto hidden shrink-0 items-center gap-1 p-0.5 sm:flex">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={handleCopy}
+                  aria-label="Copy Markdown to Clipboard"
+                >
+                  {copied ? <Check className="text-green-500" /> : <Copy />}
+                </button>
+              </TooltipTrigger>
+
+              <TooltipContent>Copy Markdown to Clipboard</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={handleDownload}
+                  aria-label="Download as .md file"
+                >
+                  <Download />
+                </button>
+              </TooltipTrigger>
+
+              <TooltipContent>Download as .md file</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={handleImportClick}
+                  title="Import .md file"
+                  aria-label="Import .md file"
+                >
+                  <Upload />
+                </button>
+              </TooltipTrigger>
+
+              <TooltipContent>Import .md file</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setShowWordCount((visible) => !visible)}
+                  aria-label={
+                    showWordCount ? "Hide Word Count" : "Show Word Count"
+                  }
+                >
+                  {showWordCount ? <Eye /> : <EyeOff />}
+                </button>
+              </TooltipTrigger>
+
+              <TooltipContent>
+                {showWordCount ? "Hide Word Count" : "Show Word Count"}
+              </TooltipContent>
+            </Tooltip>
+
+            <div className="mx-1 h-4 w-px bg-border" />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={toggleFullScreen}
+                  aria-label="Toggle Full Screen"
+                >
+                  {isFullScreen ? <Minimize /> : <Maximize />}
+                </button>
+              </TooltipTrigger>
+
+              <TooltipContent>
+                {isFullScreen ? "Exit Full Screen" : "Full Screen"}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+
+          {/* Mobile More Actions Menu */}
+          <div className="ml-auto flex shrink-0 items-center sm:hidden">
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className="toolbar-dropdown-trigger shrink-0"
+                  title="More Actions"
+                  aria-label="More Actions"
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="toolbar-popover-content w-48"
+                align="end"
+                onCloseAutoFocus={(e) => e.preventDefault()}
+              >
+                <div className="toolbar-popover-header">Actions</div>
+                <button
+                  type="button"
+                  className="toolbar-popover-item"
+                  onClick={() => setShowWordCount((visible) => !visible)}
+                >
+                  {showWordCount ? (
+                    <Eye className="h-3.5 w-3.5 text-muted-foreground" />
+                  ) : (
+                    <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+
+                  <span>
+                    {showWordCount ? "Hide word count" : "Show word count"}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  className="toolbar-popover-item"
+                  onClick={handleCopy}
+                >
+                  {copied ? (
+                    <Check className="h-3.5 w-3.5 text-green-500" />
+                  ) : (
+                    <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                  <span>{copied ? "Copied!" : "Copy Markdown"}</span>
+                </button>
+                <button
+                  type="button"
+                  className="toolbar-popover-item"
+                  onClick={handleDownload}
+                >
+                  <Download className="h-3.5 w-3.5 text-muted-foreground" />
+                  <span>Download .md</span>
+                </button>
+                <button
+                  type="button"
+                  className="toolbar-popover-item"
+                  onClick={handleImportClick}
+                >
+                  <Upload className="h-3.5 w-3.5 text-muted-foreground" />
+                  <span>Import .md</span>
+                </button>
+
+                <div className="my-1 h-px bg-border" />
+                <button
+                  type="button"
+                  className="toolbar-popover-item"
+                  onClick={toggleFullScreen}
+                >
+                  {isFullScreen ? (
+                    <Minimize className="h-3.5 w-3.5 text-muted-foreground" />
+                  ) : (
+                    <Maximize className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                  <span>{isFullScreen ? "Exit Fullscreen" : "Fullscreen"}</span>
+                </button>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* Hidden native MDXEditor buttons so they still receive their reactive contexts */}
+          <div style={{ display: "none" }}>
+            <span ref={tableRef}>
+              <InsertTable />
+            </span>
+            <span ref={codeBlockRef}>
+              <InsertCodeBlock />
+            </span>
+            <span ref={thematicBreakRef}>
+              <InsertThematicBreak />
+            </span>
+            <span ref={linkRef}>
+              <CreateLink />
+            </span>
+            <span ref={inlineMathRef}>
+              <InsertInlineMath />
+            </span>
+            <span ref={blockMathRef}>
+              <InsertBlockMath />
+            </span>
+          </div>
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept=".md"
+            style={{ display: "none" }}
+          />
         </div>
+      </TooltipProvider>
 
-        <input
-          type="file"
-          ref={fileInputRef}
-          onChange={handleFileChange}
-          accept=".md"
-          style={{ display: "none" }}
-        />
-      </div>
       {showWordCount && (
         <div
           className={`editor-word-count ${
diff --git a/app/src/components/contribute/editor/IndentButtons.tsx b/app/src/components/contribute/editor/IndentButtons.tsx
index 28767a6f..faf1ab2c 100644
--- a/app/src/components/contribute/editor/IndentButtons.tsx
+++ b/app/src/components/contribute/editor/IndentButtons.tsx
@@ -9,6 +9,11 @@ import {
 } from "lexical";
 import { Indent, Outdent } from "lucide-react";
 import type { LexicalEditor } from "lexical";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 /**
  * Executes an increase indent action on the active editor selection.
@@ -102,16 +107,21 @@ export function OutdentButton({ className }: { className?: string }) {
   }, [editor]);
 
   return (
-    <button
-      type="button"
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={handleOutdent}
-      title="Decrease Indent (Shift+Tab)"
-      aria-label="Decrease Indent"
-      className={className}
-    >
-      <Outdent className="h-4 w-4" />
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={handleOutdent}
+          aria-label="Decrease Indent"
+          className={className}
+        >
+          <Outdent className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+
+      <TooltipContent>Select Block Type</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -123,16 +133,21 @@ export function IndentButton({ className }: { className?: string }) {
   }, [editor]);
 
   return (
-    <button
-      type="button"
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={handleIndent}
-      title="Increase Indent (Tab)"
-      aria-label="Increase Indent"
-      className={className}
-    >
-      <Indent className="h-4 w-4" />
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={handleIndent}
+          aria-label="Increase Indent"
+          className={className}
+        >
+          <Indent className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+
+      <TooltipContent>Select Block Type</TooltipContent>
+    </Tooltip>
   );
 }