From bddd22453c4a37b7673ba156d6659996d645027f Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 10 Apr 2026 19:32:54 -0400
Subject: [PATCH] fix(mobile): comprehensive mobile rendering fixes for all
 platforms

- index.html: add viewport-fit=cover, user-scalable=no, maximum-scale=1,
  apple-mobile-web-app-capable, format-detection meta tags
- close2.html: add missing viewport meta tag and mobile web app tags
- _base.scss: add touch-action:manipulation and -webkit-tap-highlight-color
  on body for 300ms tap delay fix and Android tap flash removal
- _videolayout_default.scss: fix invalid overflow:'hidden' (quoted string),
  add vh fallback before dvh for iOS 14 compat
- _toolbars.scss: move :active states outside hover media query so touch
  devices get visual feedback on hangup button
- _whiteboard.scss: add dvh/dvw fallback for iOS Safari address bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 css/_base.scss                |  2 ++
 css/_toolbars.scss            | 12 ++++++------
 css/_videolayout_default.scss |  5 ++++-
 css/modals/_whiteboard.scss   |  2 ++
 index.html                    |  5 ++++-
 static/close2.html            |  3 +++
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/css/_base.scss b/css/_base.scss
index 744292e..92293b0 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -33,6 +33,8 @@ body {
     overflow: hidden;
     color: #F1F1F1;
     background: #040404; // should match DEFAULT_BACKGROUND from interface_config
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 }
 
 /**
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 84864a8..a96bc4a 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -111,10 +111,10 @@ div.hangup-button {
         &:hover {
             background-color: #E04757;
         }
+    }
 
-        &:active {
-            background-color: #A21B29;
-        }
+    &:active {
+        background-color: #A21B29;
     }
 
     svg {
@@ -129,10 +129,10 @@ div.hangup-menu-button {
         &:hover {
             background-color: #E04757;
         }
+    }
 
-        &:active {
-            background-color: #A21B29;
-        }
+    &:active {
+        background-color: #A21B29;
     }
 
     svg {
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 795c4e5..ffa623d 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -57,7 +57,7 @@
 .videocontainer {
     position: relative;
     text-align: center;
-    overflow: 'hidden';
+    overflow: hidden;
 }
 
 #localVideoWrapper {
@@ -287,9 +287,12 @@
     #avatarContainer {
         border-radius: 50%;
         display: inline-block;
+        height: 50vh;
         height: 50dvh;
+        margin-top: 25vh;
         margin-top: 25dvh;
         overflow: hidden;
+        width: 50vh;
         width: 50dvh;
 
         #avatar {
diff --git a/css/modals/_whiteboard.scss b/css/modals/_whiteboard.scss
index 5a133e6..411bc49 100644
--- a/css/modals/_whiteboard.scss
+++ b/css/modals/_whiteboard.scss
@@ -2,6 +2,8 @@
 
     .excalidraw-wrapper {
         height: 100vh;
+        height: 100dvh;
         width: 100vw;
+        width: 100dvw;
     }
 }
diff --git a/index.html b/index.html
index 939e3cd..bdc241f 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,11 @@
     <!--#include virtual="head.html" -->
     <meta charset="utf-8">
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <meta name="theme-color" content="#1e1040">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="format-detection" content="telephone=no">
     <!--#include virtual="base.html" -->
 
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
diff --git a/static/close2.html b/static/close2.html
index 38b5622..2a6f34a 100644
--- a/static/close2.html
+++ b/static/close2.html
@@ -1,6 +1,9 @@
 <html>
 <head>
     <!--#include virtual="/base.html" -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link rel="stylesheet" href="css/all.css"/>
     <!--#include virtual="/title.html" -->
     <script><!--#include virtual="/interface_config.js" --></script>