From 42c32466845a04771eb3088300682bf3d2262e7c Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Tue, 1 Jul 2025 22:12:39 -0400
Subject: [PATCH] fix(mobile): prevent modal overflow issues

- 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
---
 src/ui.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index 9f8eb62..d40d533 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -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;
     `;