engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mobile): prevent modal overflow issues

Browse source 
- Add box-sizing: border-box to Hermes modal and content to prevent width overflow
- Add flex-wrap to TTS voice selection to prevent horizontal overflow
- Ensure all modal content respects 95vw width constraints
- Fix layout issues on mobile devices
This commit is contained in:
Russell Ballestrini 2025-07-01 22:12:39 -04:00
parent ec9853be45
commit 42c3246684
1 changed files with 15 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/ui.js
View file

@ -490,7 +490,7 @@ export async function openHermesModal() {
if (USE_CUSTOM_STYLING) {
modal.style.cssText += `
width: 95vw;
max-width: 800px;
max-width: 720px;
max-height: 95vh;
top: 50%;
left: 50%;
@ -501,23 +501,28 @@ export async function openHermesModal() {
background: white;
margin: 0;
overflow: auto;
box-sizing: border-box;
`;
} else {
modal.style.cssText += `
width: 95vw;
max-width: 800px;
max-width: 720px;
max-height: 95vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
overflow: auto;
box-sizing: border-box;
`;
}
const article = document.createElement("article");
if (USE_CUSTOM_STYLING) {
article.style.cssText = `
width: 100%;
max-width: 100%;
box-sizing: border-box;
height: 100%;
display: grid;
grid-template-rows: auto auto 1fr auto;
@ -1462,6 +1467,14 @@ export function openTTSModal() {
if (USE_CUSTOM_STYLING) {
voiceSelection.style.cssText = `
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0;
`;
} else {
voiceSelection.style.cssText = `
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0;
`;