feat: mobile optimize

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/layout/header/internal/HeaderDrawerButton.tsx

@@ -48,7 +48,7 @@ export const HeaderDrawerButton = () => {
 
                 <Dialog.Content>
                   <motion.dialog
-                    className="fixed bottom-0 left-0 right-0 top-6 z-[12] flex max-h-[100vh] min-h-0 items-center justify-center overflow-auto rounded-xl bg-base-100/90"
+                    className="fixed left-0 right-0 top-0 z-[12] block overflow-auto rounded-xl bg-base-100/90"
                     initial={{ opacity: 0.8 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}

src/components/layout/header/internal/HeaderDrawerContent.tsx

@@ -14,11 +14,10 @@ export const HeaderDrawerContent = () => {
   const { config } = useHeaderConfig()
 
   return (
-    <div className="mt-20 w-[90vw] space-y-4 overflow-auto pb-8 scrollbar-none">
+    <div className="mt-12 max-h-screen w-[90vw] space-y-4 overflow-auto pb-8 scrollbar-none">
       {config.map((section, index) => {
         return (
           <motion.section
-            className={index === 0 ? 'mt-8' : undefined}
             initial={{ y: 30, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{

src/components/ui/code-highlighter/CodeHighlighter.module.css

@@ -2,7 +2,9 @@
   @apply relative flex w-full flex-col overflow-auto;
 
   pre > code {
-    @apply block bg-base-100 font-mono text-[14px] font-medium;
+    @apply block font-mono text-[14px] font-medium;
+
+    background: transparent !important;
   }
 }
 

src/components/ui/code-highlighter/CodeHighlighter.tsx

@@ -46,7 +46,7 @@ export const HighLighter: FC<Props> = (props) => {
     }
 
     prevThemeCSS.current = css
-  }, [theme, isPrintMode])
+  }, [theme, isPrintMode, systemTheme])
   useInsertionEffect(() => {
     loadStyleSheet(
       'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.css',

src/components/widgets/comment/CommentBox/CommentBoxLegacyForm.tsx

@@ -43,7 +43,7 @@ const FormInput = (props: { fieldKey: FormKey; required?: boolean }) => {
 const FormWithUserInfo = () => {
   return (
     <form className="flex flex-col space-y-4">
-      <div className="flex space-x-4">
+      <div className="flex flex-col space-x-0 space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <FormInput fieldKey="author" required />
         <FormInput fieldKey="mail" required />
         <FormInput fieldKey="url" />

src/components/widgets/note/NoteFooterNavigation.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/navigation'
 import type { FC } from 'react'
 
 import { MdiClockTimeThreeOutline } from '~/components/icons/clock'
-import { Divider } from '~/components/ui/divider'
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
@@ -34,7 +33,6 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
       {/* // 没有 0 的情况 */}
       {(!!prevNid || !!nextNid) && (
         <>
-          <Divider className="!w-15 m-auto" />
           <section className="relative mt-4 py-2 text-center" data-hide-print>
             <div className="flex items-center justify-between [&>*]:inline-flex [&>*]:items-center [&>*]:space-x-2 [&>*]:px-2 [&>*]:py-2">
               {!!nextNid && (