chore: fix button styles

web/src/components/MemoContentV1/CodeBlock.tsx

@@ -1,7 +1,9 @@
+import { IconButton } from "@mui/joy";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
 import toast from "react-hot-toast";
+import Icon from "../Icon";
 
 interface Props {
   language: string;
@@ -27,14 +29,21 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   };
 
   return (
-    <pre className="group w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
-      <button
-        className="text-xs font-mono italic absolute top-0 right-0 px-2 leading-6 border btn-text rounded opacity-0 group-hover:opacity-60"
+    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
+      <IconButton
+        size="sm"
+        className="!absolute top-0.5 right-0.5 opacity-50"
+        sx={{
+          "--IconButton-size": "24px",
+        }}
         onClick={handleCopyButtonClick}
       >
-        copy
-      </button>
-      <code className={classNames(`language-${formatedLanguage}`, "block")} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>
+        <Icon.Copy className="w-4 h-auto" />
+      </IconButton>
+      <code
+        className={classNames(`language-${formatedLanguage}`, "block text-sm")}
+        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+      ></code>
     </pre>
   );
 };

web/src/components/MobileHeader.tsx

@@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
   return (
     <div
       className={classNames(
-        "sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 backdrop-blur flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
+        "sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
         offsetTop > 0 && "shadow-md"
       )}
     >

web/src/components/UserBanner.tsx

@@ -33,12 +33,12 @@ const UserBanner = () => {
   };
 
   return (
-    <div className="flex flex-row justify-between items-center relative w-full h-auto px-2 flex-nowrap shrink-0">
+    <div className="relative w-full h-auto px-2 shrink-0">
       <Dropdown
         className="w-auto"
         trigger={
           <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
-            <UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
+            <UserAvatar className="shadow shrink-0" avatarUrl={user?.avatarUrl} />
             <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
             {user?.role === User_Role.HOST ? (
               <span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>