From 008303d043d0c8653eef9e7337cce15121e9ac83 Mon Sep 17 00:00:00 2001
From: Ilyas Hallak <ilhallak@gmail.com>
Date: Fri, 10 Oct 2025 17:27:27 +0200
Subject: [PATCH] fix: Prevent content overflow in NativeWebView

- Added universal max-width: 100% to all elements
- Added overflow-wrap, word-wrap, and word-break to body
- Added overflow-x: hidden to html
- Fixed pre blocks with white-space: pre-wrap and max-width
- Fixed tables with display: block and overflow-x: auto
- Added word-wrap to table cells

This prevents wide content (long URLs, code blocks, tables) from
overflowing the viewport width in iOS 26+ NativeWebView.
---
 readeck/UI/Components/NativeWebView.swift | 51 +++++++++++++++++------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/readeck/UI/Components/NativeWebView.swift b/readeck/UI/Components/NativeWebView.swift
index 6aa7ddb..8a8ebda 100644
--- a/readeck/UI/Components/NativeWebView.swift
+++ b/readeck/UI/Components/NativeWebView.swift
@@ -119,6 +119,11 @@ struct NativeWebView: View {
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <meta name="color-scheme" content="\(isDarkMode ? "dark" : "light")">
             <style>
+                * {
+                    box-sizing: border-box;
+                    max-width: 100%;
+                }
+
                 body {
                     font-family: \(fontFamily);
                     line-height: 1.8;
@@ -130,13 +135,19 @@ struct NativeWebView: View {
                     -webkit-text-size-adjust: 100%;
                     -webkit-user-select: text;
                     user-select: text;
-                    overflow: hidden; /* Disable scrolling in WebView */
+                    overflow: hidden;
+                    overflow-wrap: break-word;
+                    word-wrap: break-word;
+                    word-break: break-word;
                     height: auto;
+                    max-width: 100%;
                 }
-                
+
                 html {
-                    overflow: hidden; /* Disable scrolling */
+                    overflow: hidden;
+                    overflow-x: hidden;
                     height: auto;
+                    max-width: 100%;
                 }
                 
                 h1, h2, h3, h4, h5, h6 {
@@ -173,20 +184,36 @@ struct NativeWebView: View {
                     font-family: 'SF Mono', monospace; 
                 }
                 
-                pre { 
-                    background-color: \(isDarkMode ? "#1C1C1E" : "#f5f5f5"); 
-                    color: \(isDarkMode ? "#ffffff" : "#000000"); 
-                    padding: 16px; 
-                    border-radius: 8px; 
-                    overflow-x: auto; 
-                    font-family: 'SF Mono', monospace; 
+                pre {
+                    background-color: \(isDarkMode ? "#1C1C1E" : "#f5f5f5");
+                    color: \(isDarkMode ? "#ffffff" : "#000000");
+                    padding: 16px;
+                    border-radius: 8px;
+                    overflow-x: auto;
+                    overflow-wrap: break-word;
+                    word-wrap: break-word;
+                    white-space: pre-wrap;
+                    max-width: 100%;
+                    font-family: 'SF Mono', monospace;
                 }
                 
                 ul, ol { padding-left: 20px; margin-bottom: 16px; }
                 li { margin-bottom: 4px; }
                 
-                table { width: 100%; border-collapse: collapse; margin: 16px 0; }
-                th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; }
+                table {
+                    width: 100%;
+                    max-width: 100%;
+                    border-collapse: collapse;
+                    margin: 16px 0;
+                    display: block;
+                    overflow-x: auto;
+                }
+                th, td {
+                    border: 1px solid #ccc;
+                    padding: 8px 12px;
+                    text-align: left;
+                    word-wrap: break-word;
+                }
                 th { font-weight: 600; }
                 
                 hr { border: none; height: 1px; background-color: #ccc; margin: 24px 0; }