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

51
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="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; }