style: improve code block styling and formatting

- Adjust CodeBlock styling for better layout and spacing
- Reorganize copy button positioning with absolute positioning
- Simplify button styling and reduce icon sizes
- Wrap MermaidBlock in pre tag for consistent structure
- Format useDropdownMenuSubHoverDelay hook call for readability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

web/src/components/MemoContent/CodeBlock.tsx

@@ -25,9 +25,11 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP
   // If it's a mermaid block, render with MermaidBlock component
   if (language === "mermaid") {
     return (
-      <MermaidBlock className={className} {...props}>
+      <pre className="relative">
-        {children}
+        <MermaidBlock className={cn(className)} {...props}>
-      </MermaidBlock>
+          {children}
+        </MermaidBlock>
+      </pre>
     );
   }
 
@@ -112,16 +114,16 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP
   };
 
   return (
-    <pre className="relative group">
+    <pre className="relative">
-      <div className="w-full flex flex-row justify-between items-center">
+      <div className="absolute right-2 leading-3 top-1.5 flex flex-row justify-end items-center gap-1 opacity-60 hover:opacity-80">
         <span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider select-none">{language}</span>
         <button
           onClick={handleCopy}
-          className={cn("p-1.5 rounded-md transition-all", "hover:bg-accent/50", copied ? "text-primary" : "text-muted-foreground")}
+          className={cn("rounded-md transition-all", "hover:bg-accent/50", copied ? "text-primary" : "text-muted-foreground")}
           aria-label={copied ? "Copied" : "Copy code"}
           title={copied ? "Copied!" : "Copy code"}
         >
-          {copied ? <CheckIcon className="w-3.5 h-3.5" /> : <CopyIcon className="w-3.5 h-3.5" />}
+          {copied ? <CheckIcon className="w-3 h-3" /> : <CopyIcon className="w-3 h-3" />}
         </button>
       </div>
       <div className={className} {...props}>

web/src/components/MemoEditor/Toolbar/InsertMenu.tsx

@@ -41,7 +41,10 @@ const InsertMenu = observer((props: Props) => {
   // Abort controller for canceling geocoding requests
   const { abort: abortGeocoding, abortAndCreate: createGeocodingSignal } = useAbortController();
 
-  const { handleTriggerEnter, handleTriggerLeave, handleContentEnter, handleContentLeave } = useDropdownMenuSubHoverDelay(150, setMoreSubmenuOpen);
+  const { handleTriggerEnter, handleTriggerLeave, handleContentEnter, handleContentLeave } = useDropdownMenuSubHoverDelay(
+    150,
+    setMoreSubmenuOpen,
+  );
 
   const { fileInputRef, selectingFlag, handleFileInputChange, handleUploadClick } = useFileUpload((newFiles: LocalFile[]) => {
     if (context.addLocalFiles) {