txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile viewport overflow — no horizontal scroll on iPhone

Browse Source 
- Replace 100vw with 100% on mobile chat panel (avoids scrollbar width)
- Add overflow-x: hidden on html/body for mobile
- Add box-sizing: border-box on mobile panel
- Add overflow: hidden and max-width: 100% on chat rows
- Add overflow-x: hidden on messages container
This commit is contained in:
juanatsap
2026-04-09 23:19:23 +01:00
parent 837e6fac9d
commit 42fe69f5a0
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+15 -6
View File
@@ -314,6 +314,7 @@
.chat-messages { .chat-messages {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
padding: 12px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -327,6 +328,8 @@
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: flex-start; align-items: flex-start;
max-width: 100%;
overflow: hidden;
} }
.chat-row-bot { .chat-row-bot {
@@ -845,17 +848,23 @@
========================================================================== */ ========================================================================== */
@media (max-width: 480px) { @media (max-width: 480px) {
/* Prevent horizontal scroll when chat is open */
html, body {
overflow-x: hidden;
}
/* Default compact: bottom sheet with clear separation */ /* Default compact: bottom sheet with clear separation */
.chat-panel { .chat-panel {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: 100vw; width: 100%;
max-width: 100vw; max-width: 100%;
max-height: 50vh; max-height: 50vh;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
overflow: hidden; overflow: hidden;
box-sizing: border-box;
} }
.chat-toggle-btn { .chat-toggle-btn {
@@ -880,8 +889,8 @@
left: 0; left: 0;
right: 0; right: 0;
top: auto; top: auto;
width: 100vw; width: 100%;
max-width: 100vw; max-width: 100%;
height: 50vh; height: 50vh;
max-height: 50vh; max-height: 50vh;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
@@ -902,8 +911,8 @@
left: 0; left: 0;
right: 0; right: 0;
top: auto; top: auto;
width: 100vw; width: 100%;
max-width: 100vw; max-width: 100%;
height: auto; height: auto;
max-height: 50vh; max-height: 50vh;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;