fix: mobile view

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

.vscode/settings.json

@@ -4,7 +4,8 @@
   "tailwindCSS.experimental.classRegex": [
     [
       "tv\\(([^)]*)\\)",
-      "[\"'`]([^\"'`]*).*?[\"'`]"
+      "[\"'`]([^\"'`]*).*?[\"'`]",
+      // match variants className
     ]
   ],
 }

src/app/notes/Paper.tsx

@@ -6,7 +6,7 @@ export const Paper: Component = ({ children }) => {
       className={clsx(
         'relative bg-slate-50 dark:bg-zinc-900 md:col-start-1 lg:col-auto',
         '-m-4 p-[2rem_1rem] lg:m-0 lg:p-[30px_45px]',
-        'rounded-[0_6px_6px_0] border border-[#bbb3] shadow-sm dark:shadow-[#333]',
+        'rounded-[0_6px_6px_0] border-neutral-100 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
         'note-layout-main',
       )}
     >

src/app/notes/[id]/page.tsx

@@ -88,8 +88,10 @@ const NotePage = memo(({ note }: { note: NoteModel }) => {
       >
         <header>
           <NoteTitle />
-          <span className="inline-flex items-center text-[13px] text-neutral-content/60">
-            <FloatPopover TriggerComponent={NoteDateMeta}>{tips}</FloatPopover>
+          <span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
+            <FloatPopover as="span" TriggerComponent={NoteDateMeta}>
+              {tips}
+            </FloatPopover>
 
             <ClientOnly>
               <NoteMetaBar />

src/components/widgets/note/NoteMetaBar.tsx

@@ -13,6 +13,7 @@ import { mood2icon, weather2icon } from '~/lib/meta-icon'
 const dividerVertical = <DividerVertical className="!mx-2 scale-y-50" />
 const dividerVerticalWithKey = () =>
   cloneElement(dividerVertical, { key: `divider-${Math.random()}` })
+const sectionBlockClassName = 'flex items-center space-x-1 flex-shrink-0'
 export const NoteMetaBar = () => {
   const note = useNoteData()
   if (!note) return null
@@ -22,7 +23,7 @@ export const NoteMetaBar = () => {
   if (note.weather) {
     children.push(
       dividerVerticalWithKey(),
-      <span className="inline-flex items-center space-x-1" key="weather">
+      <span className={sectionBlockClassName} key="weather">
         {weather2icon(note.weather)}
         <span className="font-medium">{note.weather}</span>
       </span>,
@@ -32,7 +33,7 @@ export const NoteMetaBar = () => {
   if (note.mood) {
     children.push(
       dividerVerticalWithKey(),
-      <span className="inline-flex items-center space-x-1" key="mood">
+      <span className={sectionBlockClassName} key="mood">
         {mood2icon(note.mood)}
         <span className="font-medium">{note.mood}</span>
       </span>,
@@ -42,7 +43,7 @@ export const NoteMetaBar = () => {
   if (note.count.read > 0) {
     children.push(
       dividerVerticalWithKey(),
-      <span className="inline-flex items-center space-x-1" key="readcount">
+      <span className={sectionBlockClassName} key="readcount">
         <i className="icon-[mingcute--book-6-line]" />
         <span className="font-medium">{note.count.read}</span>
       </span>,
@@ -52,7 +53,7 @@ export const NoteMetaBar = () => {
   if (note.count.like > 0) {
     children.push(
       dividerVerticalWithKey(),
-      <span className="inline-flex items-center space-x-1" key="linkcount">
+      <span className={sectionBlockClassName} key="linkcount">
         <i className="icon-[mingcute--heart-line]" />
         <span className="font-medium">{note.count.like}</span>
       </span>,

src/middleware.ts

@@ -9,7 +9,7 @@ import {
   REQUEST_QUERY,
 } from './constants/system'
 
-let lastGeo = ``
+const lastGeo = ``
 
 export default async function middleware(req: NextRequest) {
   const { pathname, search } = req.nextUrl
@@ -40,9 +40,7 @@ export default async function middleware(req: NextRequest) {
     const countryInfo = countries.find((x) => x.cca2 === country)
     if (countryInfo) {
       const flag = countryInfo.flag
-      requestHeaders.set(REQUEST_GEO, lastGeo)
-      lastGeo = `${country}-${city}-${flag}`
-      // getQueryClient().setQueryData(GEO_QUERY_KEY, { country, city, flag })
+      requestHeaders.set(REQUEST_GEO, `${country}-${city}-${flag}`)
     }
   }