fix: Adds dynamic type support for iOS (#3005)

antsgar · web-flow · commit 6261fd8241b3 · 2026-04-23T14:49:29.000-03:00
* feat: Adds dynamic type support for iOS

* fix: Replace hardcoded pixel font sizes

* fix: fixes eslint error
diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx
@@ -2,7 +2,7 @@
 
 import { ApplicationEvent, ReactNativeToWebEvent } from '@standardnotes/snjs'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Dimensions, Keyboard, KeyboardEvent, Platform, Text, View } from 'react-native'
+import { AppState, Button, Dimensions, Keyboard, KeyboardEvent, Platform, Text, View } from 'react-native'
 import VersionInfo from 'react-native-version-info'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { OnShouldStartLoadWithRequest, WebViewNativeConfig } from 'react-native-webview/lib/WebViewTypes'
@@ -52,6 +52,18 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
   const useFlexLayout = Platform.OS === 'ios' || androidVersion < 35
   const [webViewContainerHeight, setWebViewContainerHeight] = useState(screenHeight)
 
+  const applyDynamicTypeFontScale = useCallback((fontScale?: number) => {
+    if (Platform.OS !== 'ios') {
+      return
+    }
+
+    const scale = fontScale ?? Dimensions.get('window').fontScale
+    webViewRef.current?.injectJavaScript(`
+      document.documentElement.style.fontSize = 'calc(1rem * ${scale})';
+      true;
+    `)
+  }, [])
+
   useEffect(() => {
     const removeStateServiceListener = stateService.addEventObserver((event: ReactNativeToWebEvent) => {
       webViewRef.current?.postMessage(JSON.stringify({ reactNativeEvent: event, messageType: 'event' }))
@@ -150,6 +162,27 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     }
   }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService, insets.bottom, screenHeight])
 
+  useEffect(() => {
+    if (Platform.OS !== 'ios') {
+      return
+    }
+
+    const dimensionsListener = Dimensions.addEventListener('change', ({ window }) => {
+      applyDynamicTypeFontScale(window.fontScale)
+    })
+
+    const appStateListener = AppState.addEventListener('change', (state) => {
+      if (state === 'active') {
+        applyDynamicTypeFontScale()
+      }
+    })
+
+    return () => {
+      dimensionsListener.remove()
+      appStateListener.remove()
+    }
+  }, [applyDynamicTypeFontScale])
+
   useEffect(() => {
     return notifee.onForegroundEvent(({ type, detail }) => {
       if (type !== EventType.ACTION_PRESS) {
@@ -305,6 +338,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     }
     if (message === 'appLoaded') {
       setDidLoadEnd(true)
+      applyDynamicTypeFontScale()
       return
     }
     try {
diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -301,7 +301,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                           {menuItem.uiFeature.featureIdentifier === NativeFeatureIdentifier.TYPES.SuperEditor &&
                             !isSelected(menuItem) &&
                             recommendSuper && (
-                              <Pill className="px-1.5 py-0.5 text-[9px]" style="info">
+                              <Pill className="px-1.5 py-0.5 text-[0.5625rem]" style="info">
                                 Recommended
                               </Pill>
                             )}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/WhatsNew/WhatsNew.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/WhatsNew/WhatsNew.tsx
@@ -80,17 +80,17 @@ const WhatsNew = ({ application }: { application: WebApplication }) => {
                 <div className="flex items-start">
                   <Title className="mb-3 flex">{version.version}</Title>
                   {version.version === appVersion && (
-                    <div className="ml-2 select-none rounded bg-info px-2 py-1 text-[10px] font-bold text-info-contrast">
+                    <div className="ml-2 select-none rounded bg-info px-2 py-1 text-[0.625rem] font-bold text-info-contrast">
                       Your Version
                     </div>
                   )}
                   {isLatest && (
-                    <div className="ml-2 select-none rounded bg-success px-2 py-1 text-[10px] font-bold text-success-contrast">
+                    <div className="ml-2 select-none rounded bg-success px-2 py-1 text-[0.625rem] font-bold text-success-contrast">
                       Latest Version
                     </div>
                   )}
                   {isUnreadVersion && (
-                    <div className="ml-2 select-none rounded bg-success px-2 py-1 text-[10px] font-bold text-success-contrast">
+                    <div className="ml-2 select-none rounded bg-success px-2 py-1 text-[0.625rem] font-bold text-success-contrast">
                       New
                     </div>
                   )}
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -53,6 +53,8 @@ type PillProps = Props & {
 export const Pill: FunctionComponent<PillProps> = ({ children, className, style }) => {
   const colorClass = getColorsForPrimaryVariant(style)
   return (
-    <div className={classNames('ml-2 rounded px-2 py-1 text-[10px] font-bold', className, colorClass)}>{children}</div>
+    <div className={classNames('ml-2 rounded px-2 py-1 text-[0.625rem] font-bold', className, colorClass)}>
+      {children}
+    </div>
   )
 }
diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx
@@ -23,7 +23,7 @@ export const SuccessPrompt = ({
           className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"
           aria-hidden={true}
         >
-          <Icon className={'h-24 w-24 px-7 py-2 text-[50px]'} size={'custom'} type={'🎉'} />
+          <Icon className={'h-24 w-24 px-7 py-2 text-[3.125rem]'} size={'custom'} type={'🎉'} />
         </div>
         <div className="mb-1 text-center text-lg font-bold">Your purchase was successful!</div>
       </div>
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
@@ -34,19 +34,19 @@
   }
 }
 .Lexical__h1 {
-  font-size: 26px;
+  font-size: 1.625rem;
   color: var(--sn-stylekit-editor-foreground-color);
   font-weight: 700;
   margin: 0;
 }
 .Lexical__h2 {
-  font-size: 22px;
+  font-size: 1.375rem;
   color: var(--sn-stylekit-editor-foreground-color);
   font-weight: 700;
   margin: 0;
 }
 .Lexical__h3 {
-  font-size: 19px;
+  font-size: 1.1875rem;
   font-weight: 700;
   margin: 0;
 }
diff --git a/packages/web/src/stylesheets/_editor.scss b/packages/web/src/stylesheets/_editor.scss
@@ -71,7 +71,7 @@ $heading-height: 75px;
   }
 
   #save-status {
-    font-size: calc(var(--sn-stylekit-base-font-size) - 2px);
+    font-size: calc(var(--sn-stylekit-base-font-size) - 0.125rem);
     text-transform: none;
     font-weight: normal;
 
diff --git a/packages/web/src/stylesheets/_items-column.scss b/packages/web/src/stylesheets/_items-column.scss
@@ -89,7 +89,7 @@
       cursor: default;
       background-color: var(--sn-stylekit-neutral-color);
       color: var(--sn-stylekit-neutral-contrast-color);
-      font-size: 10px;
+      font-size: 0.625rem;
       line-height: 17px;
       text-align: center;
       position: absolute;
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
@@ -160,7 +160,7 @@ body,
 
     .section-title-bar {
       .add-button {
-        font-size: 12px;
+        font-size: 0.75rem;
       }
 
       .section-title-bar-header {
diff --git a/packages/web/src/stylesheets/_navigation.scss b/packages/web/src/stylesheets/_navigation.scss
@@ -23,7 +23,7 @@ $content-horizontal-padding: 16px;
     padding-bottom: 8px;
     padding-left: $content-horizontal-padding;
     padding-right: $content-horizontal-padding;
-    font-size: 12px;
+    font-size: 0.75rem;
   }
 
   .root-drop {
@@ -54,7 +54,7 @@ $content-horizontal-padding: 16px;
 
   .tag,
   .root-drop {
-    font-size: 14px;
+    font-size: 0.875rem;
     cursor: pointer;
     transition: height 0.1s ease-in-out;
     width: 100%;
@@ -136,7 +136,7 @@ $content-horizontal-padding: 16px;
 
     .meta {
       > .menu {
-        font-size: 11px;
+        font-size: 0.6875rem;
 
         > .item {
           margin-right: 4px;

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,8 @@ type PillProps = Props & {`
`53`	`53`	`export const Pill: FunctionComponent<PillProps> = ({ children, className, style }) => {`
`54`	`54`	`const colorClass = getColorsForPrimaryVariant(style)`
`55`	`55`	`return (`
`56`		`- <div className={classNames('ml-2 rounded px-2 py-1 text-[10px] font-bold', className, colorClass)}>{children}</div>`
	`56`	`+ <div className={classNames('ml-2 rounded px-2 py-1 text-[0.625rem] font-bold', className, colorClass)}>`
	`57`	`+ {children}`
	`58`	`+ </div>`
`57`	`59`	`)`
`58`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export const SuccessPrompt = ({`
`23`	`23`	`className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"`
`24`	`24`	`aria-hidden={true}`
`25`	`25`	`>`
`26`		`- <Icon className={'h-24 w-24 px-7 py-2 text-[50px]'} size={'custom'} type={'🎉'} />`
	`26`	`+ <Icon className={'h-24 w-24 px-7 py-2 text-[3.125rem]'} size={'custom'} type={'🎉'} />`
`27`	`27`	`</div>`
`28`	`28`	`<div className="mb-1 text-center text-lg font-bold">Your purchase was successful!</div>`
`29`	`29`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -34,19 +34,19 @@`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`	`.Lexical__h1 {`
`37`		`- font-size: 26px;`
	`37`	`+ font-size: 1.625rem;`
`38`	`38`	`color: var(--sn-stylekit-editor-foreground-color);`
`39`	`39`	`font-weight: 700;`
`40`	`40`	`margin: 0;`
`41`	`41`	`}`
`42`	`42`	`.Lexical__h2 {`
`43`		`- font-size: 22px;`
	`43`	`+ font-size: 1.375rem;`
`44`	`44`	`color: var(--sn-stylekit-editor-foreground-color);`
`45`	`45`	`font-weight: 700;`
`46`	`46`	`margin: 0;`
`47`	`47`	`}`
`48`	`48`	`.Lexical__h3 {`
`49`		`- font-size: 19px;`
	`49`	`+ font-size: 1.1875rem;`
`50`	`50`	`font-weight: 700;`
`51`	`51`	`margin: 0;`
`52`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ $heading-height: 75px;`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`#save-status {`
`74`		`- font-size: calc(var(--sn-stylekit-base-font-size) - 2px);`
	`74`	`+ font-size: calc(var(--sn-stylekit-base-font-size) - 0.125rem);`
`75`	`75`	`text-transform: none;`
`76`	`76`	`font-weight: normal;`
`77`	`77`
Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,7 @@ body,`
`160`	`160`
`161`	`161`	`.section-title-bar {`
`162`	`162`	`.add-button {`
`163`		`- font-size: 12px;`
	`163`	`+ font-size: 0.75rem;`
`164`	`164`	`}`
`165`	`165`
`166`	`166`	`.section-title-bar-header {`