admin/ReadKeep
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Prevent content overflow in NativeWebView

Browse Source 
- 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.
This commit is contained in:
Ilyas Hallak 2025-10-10 17:27:27 +02:00
parent 37321f31c9
commit 008303d043
1 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
readeck/UI/Components/NativeWebView.swift
View File

@ -119,6 +119,11 @@ struct NativeWebView: View {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="\(isDarkMode ? "dark" : "light")"> <meta name="color-scheme" content="\(isDarkMode ? "dark" : "light")">
<style> <style>
* {
box-sizing: border-box;
max-width: 100%;
}
body { body {
font-family: \(fontFamily); font-family: \(fontFamily);
line-height: 1.8; line-height: 1.8;
@ -130,13 +135,19 @@ struct NativeWebView: View {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-user-select: text; -webkit-user-select: text;
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; height: auto;
max-width: 100%;
} }
html { html {
overflow: hidden; /* Disable scrolling */ overflow: hidden;
overflow-x: hidden;
height: auto; height: auto;
max-width: 100%;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -179,14 +190,30 @@ struct NativeWebView: View {
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
overflow-x: auto; overflow-x: auto;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: pre-wrap;
max-width: 100%;
font-family: 'SF Mono', monospace; font-family: 'SF Mono', monospace;
} }
ul, ol { padding-left: 20px; margin-bottom: 16px; } ul, ol { padding-left: 20px; margin-bottom: 16px; }
li { margin-bottom: 4px; } li { margin-bottom: 4px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; } table {
th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; } 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; } th { font-weight: 600; }
hr { border: none; height: 1px; background-color: #ccc; margin: 24px 0; } hr { border: none; height: 1px; background-color: #ccc; margin: 24px 0; }