diff --git a/apps/mobile/src/native/EnrichedMarkdownText.tsx b/apps/mobile/src/native/EnrichedMarkdownText.tsx index 142fee0e61a75..13739f0f24a1a 100644 --- a/apps/mobile/src/native/EnrichedMarkdownText.tsx +++ b/apps/mobile/src/native/EnrichedMarkdownText.tsx @@ -12,7 +12,7 @@ import { markdownWithTableBreaks, } from "../lib/markdownDocument"; import { isValidElement, useMemo, useState, type ReactNode } from "react"; -import { Platform, Share, StyleSheet, View } from "react-native"; +import { Platform, Share, StyleSheet, useWindowDimensions, View } from "react-native"; import { EnrichedMarkdownText, type MarkdownImageBlock, @@ -35,6 +35,7 @@ import { function enrichedStyle( style: SelectableMarkdownTextProps["textStyle"], dark: boolean, + fontScale: number, ): MarkdownStyle { const monospace = Platform.OS === "ios" ? "Menlo" : "monospace"; // Keep the radius modest: iOS clips square table-cell borders without stroking the corner arcs. @@ -132,7 +133,13 @@ function enrichedStyle( borderWidth: 2, gapWidth: 12, }, - list: { ...body, bulletColor: style.mutedColor, markerColor: style.mutedColor, gapWidth: 6 }, + list: { + ...body, + bulletColor: style.mutedColor, + markerColor: style.mutedColor, + // The bullet is centred on the gap's edge and scales with the system text size; the gap must too. + gapWidth: 12 * fontScale, + }, thematicBreak: { color: style.dividerColor, height: 1, marginTop: 8, marginBottom: 8 }, table: { ...body, @@ -256,9 +263,13 @@ export function MobileEnrichedMarkdownText(props: SelectableMarkdownTextProps) { mimeTypes: { "app.t3.context-fragment": props.contextClipboardFragment! }, }; }, [props.contextClipboardFragment, props.markdown]); + const { fontScale } = useWindowDimensions(); const markdownStyle = useMemo( - () => ({ ...enrichedStyle(props.textStyle, themeAppearance === "dark"), linkVariants }), - [props.textStyle, themeAppearance, linkVariants], + () => ({ + ...enrichedStyle(props.textStyle, themeAppearance === "dark", fontScale), + linkVariants, + }), + [props.textStyle, themeAppearance, fontScale, linkVariants], ); const renderers = renderImage ? {