From 9a37ea2e1d0886aae62c8cd3b7421160b93f89e7 Mon Sep 17 00:00:00 2001
From: snehasishcodes <snehasishcodes@gmail.com>
Date: Mon, 17 Aug 2026 15:13:04 +0530
Subject: [PATCH] fix(mobile): apply Manrope font globally and fix onboarding
 title clipping

Load all Manrope weight faces and remap font-weight utilities to the
corresponding families so every Text uses Manrope on native. Also guard
the onboarding title against right-edge clipping in the horizontal
FlatList.
---
 apps/mobile/app/_layout.tsx                   | 18 ++++++++++++---
 apps/mobile/app/onboarding.tsx                |  2 +-
 .../[sessionId]/selective-copy.tsx            |  2 +-
 apps/mobile/components/memo-markdown.tsx      | 20 +++++++++++++++-
 apps/mobile/components/ui/input.tsx           |  2 +-
 apps/mobile/components/ui/text.tsx            |  2 +-
 apps/mobile/components/ui/textarea.tsx        |  2 +-
 apps/mobile/tailwind.config.js                | 23 +++++++++++++++++--
 8 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 6085b7a..8d423e1 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -2,8 +2,14 @@ import "../global.css"
 
 import { PortalHost } from "@rn-primitives/portal"
 import { ThemeProvider } from "@react-navigation/native"
-import { useFonts } from "@expo-google-fonts/manrope"
-import { Manrope_400Regular } from "@expo-google-fonts/manrope"
+import {
+  Manrope_400Regular,
+  Manrope_500Medium,
+  Manrope_600SemiBold,
+  Manrope_700Bold,
+  Manrope_800ExtraBold,
+  useFonts,
+} from "@expo-google-fonts/manrope"
 import { Stack, useRouter, useSegments } from "expo-router"
 import { StatusBar } from "expo-status-bar"
 import { useColorScheme } from "nativewind"
@@ -22,7 +28,13 @@ export default function RootLayout() {
   const segments = useSegments()
   const { colorScheme } = useColorScheme()
   const theme = colorScheme ?? "dark"
-  const [fontsLoaded] = useFonts({ Manrope: Manrope_400Regular })
+  const [fontsLoaded] = useFonts({
+    Manrope_400Regular,
+    Manrope_500Medium,
+    Manrope_600SemiBold,
+    Manrope_700Bold,
+    Manrope_800ExtraBold,
+  })
   const hasCompletedOnboarding = useSettings((state) => state.hasCompletedOnboarding)
   const [settingsHydrated, setSettingsHydrated] = React.useState(useSettings.persist.hasHydrated())
   useNotificationRouting()
diff --git a/apps/mobile/app/onboarding.tsx b/apps/mobile/app/onboarding.tsx
index 65cfb67..c390a2f 100644
--- a/apps/mobile/app/onboarding.tsx
+++ b/apps/mobile/app/onboarding.tsx
@@ -130,7 +130,7 @@ export default function OnboardingScreen() {
                 )}
               </View>
 
-              <Text variant="h1" className="max-w-sm text-3xl">{item.title}</Text>
+              <Text variant="h1" className="w-full max-w-sm flex-shrink-0 text-3xl font-semibold">{item.title}</Text>
               <Text className="mt-4 max-w-sm text-center text-base leading-6 text-muted-foreground">
                 {item.description}
               </Text>
diff --git a/apps/mobile/app/project/[projectId]/[sessionId]/selective-copy.tsx b/apps/mobile/app/project/[projectId]/[sessionId]/selective-copy.tsx
index d091f3f..54132ef 100644
--- a/apps/mobile/app/project/[projectId]/[sessionId]/selective-copy.tsx
+++ b/apps/mobile/app/project/[projectId]/[sessionId]/selective-copy.tsx
@@ -136,7 +136,7 @@ export default function SelectiveCopyScreen() {
                 style={{
                     color: t.foreground,
                     textAlignVertical: "top",
-                    fontFamily: "Manrope",
+                    fontFamily: "Manrope_400Regular",
                 }}
                 value={text}
                 onChangeText={handleChangeText}
diff --git a/apps/mobile/components/memo-markdown.tsx b/apps/mobile/components/memo-markdown.tsx
index c6944d2..12a5812 100644
--- a/apps/mobile/components/memo-markdown.tsx
+++ b/apps/mobile/components/memo-markdown.tsx
@@ -1,8 +1,25 @@
 import { memo, useEffect, useRef, useState } from "react"
 import { type ReactNode, Fragment } from "react"
 import Markdown from "react-native-marked"
+import type { MarkedStyles } from "react-native-marked"
 import { Text, View, type TextStyle, type ViewStyle, type ImageStyle } from "react-native"
 
+const manropeStyles: MarkedStyles = {
+    text: { fontFamily: "Manrope_400Regular" },
+    em: { fontFamily: "Manrope_400Regular" },
+    strong: { fontFamily: "Manrope_700Bold" },
+    strikethrough: { fontFamily: "Manrope_400Regular" },
+    link: { fontFamily: "Manrope_400Regular" },
+    h1: { fontFamily: "Manrope_700Bold" },
+    h2: { fontFamily: "Manrope_700Bold" },
+    h3: { fontFamily: "Manrope_600SemiBold" },
+    h4: { fontFamily: "Manrope_600SemiBold" },
+    h5: { fontFamily: "Manrope_600SemiBold" },
+    h6: { fontFamily: "Manrope_600SemiBold" },
+    codespan: { fontFamily: "Manrope_400Regular" },
+    li: { fontFamily: "Manrope_400Regular" },
+}
+
 function keyedChildren(children: ReactNode[]): ReactNode {
     if (!Array.isArray(children)) return children
     return children.map((child, i) => <Fragment key={i}>{child}</Fragment>)
@@ -86,13 +103,14 @@ function MarkdownRendererInner({ children, streaming }: { children: string; stre
     }, [children, streaming])
 
     if (streaming && parsed !== children) {
-        return <Text className="text-sm text-foreground leading-relaxed">{children}</Text>
+        return <Text className="text-sm text-foreground leading-relaxed font-sans">{children}</Text>
     }
 
     return (
         <Markdown
             value={parsed}
             renderer={customRenderer}
+            styles={manropeStyles}
             flatListProps={{
                 scrollEnabled: false,
                 style: {
diff --git a/apps/mobile/components/ui/input.tsx b/apps/mobile/components/ui/input.tsx
index 90546b3..609c015 100644
--- a/apps/mobile/components/ui/input.tsx
+++ b/apps/mobile/components/ui/input.tsx
@@ -5,7 +5,7 @@ function Input({ className, ...props }: React.ComponentProps<typeof TextInput> &
   return (
     <TextInput
       className={cn(
-        'dark:bg-input/30 border-input bg-background text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 sm:h-9',
+        'font-sans dark:bg-input/30 border-input bg-background text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 sm:h-9',
         props.editable === false &&
         cn(
           'opacity-50',
diff --git a/apps/mobile/components/ui/text.tsx b/apps/mobile/components/ui/text.tsx
index 1b54125..b8a4bd9 100644
--- a/apps/mobile/components/ui/text.tsx
+++ b/apps/mobile/components/ui/text.tsx
@@ -6,7 +6,7 @@ import { Platform, Text as RNText, type Role } from 'react-native';
 
 const textVariants = cva(
   cn(
-    'text-foreground text-base',
+    'text-foreground text-base font-sans',
     Platform.select({
       web: 'select-text',
     })
diff --git a/apps/mobile/components/ui/textarea.tsx b/apps/mobile/components/ui/textarea.tsx
index e1d1e55..7ce24f0 100644
--- a/apps/mobile/components/ui/textarea.tsx
+++ b/apps/mobile/components/ui/textarea.tsx
@@ -11,7 +11,7 @@ function Textarea({
   return (
     <TextInput
       className={cn(
-        'text-foreground border-input placeholder:text-muted-foreground dark:bg-input/30 flex min-h-16 w-full flex-row rounded-md border bg-transparent px-3 py-2 text-base shadow-sm shadow-black/5 md:text-sm',
+        'font-sans text-foreground border-input placeholder:text-muted-foreground dark:bg-input/30 flex min-h-16 w-full flex-row rounded-md border bg-transparent px-3 py-2 text-base shadow-sm shadow-black/5 md:text-sm',
         Platform.select({
           web: 'focus-visible:border-ring ...',
         }),
diff --git a/apps/mobile/tailwind.config.js b/apps/mobile/tailwind.config.js
index 608b487..d0b7301 100644
--- a/apps/mobile/tailwind.config.js
+++ b/apps/mobile/tailwind.config.js
@@ -1,3 +1,4 @@
+const plugin = require('tailwindcss/plugin')
 const { hairlineWidth } = require('nativewind/theme')
 
 /** @type {import('tailwindcss').Config} */
@@ -10,6 +11,9 @@ module.exports = {
     './lib/**/*.{ts,tsx}',
   ],
   presets: [require('nativewind/preset')],
+  corePlugins: {
+    fontWeight: false,
+  },
   theme: {
     extend: {
       colors: {
@@ -53,7 +57,7 @@ module.exports = {
         sm: 'calc(var(--radius) - 4px)',
       },
       fontFamily: {
-        sans: ["Manrope"],
+        sans: ["Manrope_400Regular"],
         mono: ["Menlo", "monospace"],
       },
       borderWidth: {
@@ -61,5 +65,20 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [
+    require('tailwindcss-animate'),
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.font-thin': { fontFamily: 'Manrope_200ExtraLight' },
+        '.font-extralight': { fontFamily: 'Manrope_200ExtraLight' },
+        '.font-light': { fontFamily: 'Manrope_300Light' },
+        '.font-normal': { fontFamily: 'Manrope_400Regular' },
+        '.font-medium': { fontFamily: 'Manrope_500Medium' },
+        '.font-semibold': { fontFamily: 'Manrope_600SemiBold' },
+        '.font-bold': { fontFamily: 'Manrope_700Bold' },
+        '.font-extrabold': { fontFamily: 'Manrope_800ExtraBold' },
+        '.font-black': { fontFamily: 'Manrope_800ExtraBold' },
+      })
+    }),
+  ],
 }