feat: bigger font size in mobile

RSSNext · Dec 12, 2024 · 3e9a92d · 3e9a92d
1 parent 7c44d3d
commit 3e9a92d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/apps/renderer/src/modules/app-layout/feed-column/float-bar.mobile.tsx b/apps/renderer/src/modules/app-layout/feed-column/float-bar.mobile.tsx
@@ -81,7 +81,7 @@ export const MobileFloatBar = ({
     >
       <m.div
         className={clsx(
-          "mx-auto inline-flex h-10 min-w-0 items-center rounded-full border border-neutral-200 bg-background pl-4 pr-2 shadow-sm shadow-zinc-100 dark:border-neutral-800",
+          "mx-1 inline-flex h-10 w-full min-w-0 items-center rounded-full border border-neutral-200 bg-background pl-4 pr-2 shadow-sm shadow-zinc-100 dark:border-neutral-800",
           "[box-shadow:0px_8px_30px_rgba(122,122,122,0.2)] dark:[box-shadow:0px_8px_30px_rgba(122,122,122,0.2)]",
           "pointer-events-auto",
         )}

diff --git a/apps/renderer/src/providers/setting-sync.tsx b/apps/renderer/src/providers/setting-sync.tsx
@@ -1,3 +1,4 @@
+import { isMobile } from "@follow/components/hooks/useMobile.js"
 import i18next from "i18next"
 import { useEffect, useInsertionEffect, useLayoutEffect } from "react"
 
@@ -13,10 +14,11 @@ import { feedUnreadActions } from "~/store/unread"
 
 const useUISettingSync = () => {
   const setting = useUISettingValue()
+  const mobile = isMobile()
   useSyncTheme()
   useInsertionEffect(() => {
     const root = document.documentElement
-    root.style.fontSize = `${setting.uiTextSize}px`
+    root.style.fontSize = `${setting.uiTextSize * (mobile ? 1.125 : 1)}px`
   }, [setting.uiTextSize])
 
   useInsertionEffect(() => {

diff --git a/packages/components/src/ui/divider/Divider.tsx b/packages/components/src/ui/divider/Divider.tsx
@@ -20,7 +20,7 @@ export const DividerVertical: FC<
   return (
     <span
       className={cn(
-        "mx-4 inline-block h-full w-[0.5px] select-none bg-black text-transparent !opacity-20 dark:bg-white",
+        "mx-3 inline-block h-full w-[0.5px] select-none bg-black text-transparent !opacity-20 dark:bg-white",
         className,
       )}
       {...rest}