aboutsummaryrefslogtreecommitdiffstats
path: root/src/style.css
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2026-10-18 23:53:33 -0700
committerAdam Soltys <[email protected]>2026-10-18 23:53:33 -0700
commit8db6bd1e3dff5d55eb82a854149a387b5d718148 (patch)
tree2b912a1431d72b442ba76510ea293fec0e97a3d7 /src/style.css
parentaa3fecd4f0dc39550c6ad44a19736f820201d0a3 (diff)
downloadcoinosv3-8db6bd1e3dff5d55eb82a854149a387b5d718148.tar.gz
coinosv3-8db6bd1e3dff5d55eb82a854149a387b5d718148.zip
Video calls show the whole of the other person's picture (letterboxed), not cropped to fill the window — a phone's portrait camera on a laptop's wide window was a forehead filling the screen. The page under a full-screen call no longer scrolls behind it (the scrollbar did nothing visible).
Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css6
1 files changed, 5 insertions, 1 deletions
diff --git a/src/style.css b/src/style.css
index 027f11e..df5bccf 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1924,7 +1924,11 @@ body::after {
.call-overlay { position: fixed; inset: 0; z-index: 1000; background: #101318; color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
-.call-overlay .call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; }
+/* the whole of their picture, whatever its shape and the window's: a phone's
+ portrait camera filled a laptop's wide window by cropping to a forehead */
+.call-overlay .call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; }
+/* a call over the whole window: the page under it stays put */
+html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: auto; }
.call-overlay.has-video .call-remote { display: block; }
.call-overlay.has-video .call-who { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.call-overlay.has-video .call-who .call-avatar { display: none; }