adds ability to control maxWidth on iphone

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift

@@ -38,7 +38,11 @@ import WebKit
 
     func margin() -> Int {
       let storedSize = UserDefaults.standard.integer(forKey: UserDefaultKey.preferredWebMargin.rawValue)
-      return storedSize <= 1 ? 360 : storedSize
+      if storedSize < 1 {
+        return UIDevice.isIPhone ? 200 : 360
+      } else {
+        return storedSize
+      }
     }
 
     func makeUIView(context: Context) -> WKWebView {

apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift

@@ -34,7 +34,7 @@ public struct WebPreferencesPopoverView: View {
   #endif
 
   @AppStorage(UserDefaultKey.preferredWebLineSpacing.rawValue) var storedLineSpacing = 150
-  @AppStorage(UserDefaultKey.preferredWebMargin.rawValue) var storedMargin = 360
+  @AppStorage(UserDefaultKey.preferredWebMargin.rawValue) var storedMargin = UIDevice.isIPhone ? 200 : 360
   @AppStorage(UserDefaultKey.preferredWebFont.rawValue) var preferredFont = WebFont.inter.rawValue
   @AppStorage(UserDefaultKey.prefersHighContrastWebFont.rawValue) var prefersHighContrastText = false
 
@@ -96,19 +96,17 @@ public struct WebPreferencesPopoverView: View {
               }
             )
 
-            if UIDevice.isIPad {
-              LabelledStepper(
-                labelText: "Margin:",
-                onIncrement: {
-                  storedMargin = min(storedMargin + 45, 560)
-                  updateMarginAction()
-                },
-                onDecrement: {
-                  storedMargin = max(storedMargin - 45, 200)
-                  updateMarginAction()
-                }
-              )
-            }
+            LabelledStepper(
+              labelText: "Margin:",
+              onIncrement: {
+                storedMargin = min(storedMargin + 45, 560)
+                updateMarginAction()
+              },
+              onDecrement: {
+                storedMargin = max(storedMargin - 45, 200)
+                updateMarginAction()
+              }
+            )
 
             LabelledStepper(
               labelText: "Line Spacing:",

packages/web/components/templates/article/ArticleContainer.tsx

@@ -197,13 +197,28 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     readerHeadersColor: theme.colors.readerHeader.toString(),
   }
 
+  // Margin should be in rage of 200...560
+  // For Apple embeds we want to convery that to
+  // a maxWidthPercentage with 40% as the lower bound
+  // (40% when margin is 560, 100% when margin is 200)
+  function appEmbedMaxWidthPercentage(margin: number): number {
+    if (margin < 200 || margin > 560) {
+      return 100
+    }
+
+    const ratio = (margin - 200) / 360
+    return 100 - ratio * 60
+  }
+
   return (
     <>
       <Box
         id="article-container"
         css={{
           padding: '16px',
-          maxWidth: props.isAppleAppEmbed ? 1024 - styles.margin : '100%',
+          maxWidth: props.isAppleAppEmbed
+            ? `${appEmbedMaxWidthPercentage(styles.margin)}%`
+            : '100%',
           background: props.isAppleAppEmbed
             ? 'unset'
             : theme.colors.grayBg.toString(),
@@ -228,11 +243,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           '@md': {
             maxWidth: 1024 - styles.margin,
           },
-          '@lg': {
-            margin: `30px 0`,
-            width: 'auto',
-            maxWidth: 1024 - styles.margin,
-          },
         }}
       >
         <VStack alignment="start" distribution="start">