diff --git a/zebra-report/host-your-own.html b/zebra-report/host-your-own.html
index f932ada..930b337 100644
--- a/zebra-report/host-your-own.html
+++ b/zebra-report/host-your-own.html
@@ -60,6 +60,14 @@
padding: 0.5rem 1.2rem; text-decoration: none; font-size: 0.9rem;
}
.cta:hover { background: #333; }
+ @media (max-width: 600px) {
+ body { padding: 1rem; line-height: 1.55; }
+ h1 { font-size: 2.2rem; }
+ h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; }
+ .lead { font-size: 0.95rem; }
+ /* long URLs / hashes wrap instead of pushing the page wider */
+ p, li { overflow-wrap: anywhere; }
+ }
@@ -384,8 +392,8 @@ turn.example.com {
diff --git a/zebra-report/how-it-works.html b/zebra-report/how-it-works.html
index 9830fa9..dea2205 100644
--- a/zebra-report/how-it-works.html
+++ b/zebra-report/how-it-works.html
@@ -54,6 +54,13 @@
}
hr { border: none; border-top: 1px solid #ddd; margin: 2.5rem 0; }
.foot { font-size: 0.75rem; color: #777; margin-top: 2rem; }
+ @media (max-width: 600px) {
+ body { padding: 1rem; line-height: 1.55; }
+ h1 { font-size: 2.2rem; }
+ h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; }
+ .lead { font-size: 0.95rem; }
+ p, li { overflow-wrap: anywhere; }
+ }
@@ -268,8 +275,8 @@
diff --git a/zebra-report/index.html b/zebra-report/index.html
index 3932a7a..6993f60 100644
--- a/zebra-report/index.html
+++ b/zebra-report/index.html
@@ -160,7 +160,10 @@
.share-box .copy-row button { font-size: 0.75rem; padding: 0.25rem 0.7rem; }
@media (max-width: 600px) {
.share-box { grid-template-columns: 1fr; }
- .share-box .qr-canvas { justify-self: center; }
+ /* cap the QR canvas so it never pushes the page wider than the
+ * viewport on narrow phones (320px and up) */
+ .share-box .qr-canvas { justify-self: center; max-width: 100%; }
+ h1 { font-size: 2.2rem; }
}
@@ -1650,8 +1653,8 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry
diff --git a/zebra-report/zebra-audio.html b/zebra-report/zebra-audio.html
index 8f7bf35..92019aa 100644
--- a/zebra-report/zebra-audio.html
+++ b/zebra-report/zebra-audio.html
@@ -68,6 +68,13 @@
.log-line { margin-bottom: 0.2rem; word-wrap: break-word; }
.log-line .ts { color: #888; }
.log-line.err { color: #b00; }
+ @media (max-width: 600px) {
+ body { padding: 1rem; }
+ h1 { font-size: 2.2rem; }
+ .row, .controls, .level { gap: 0.5rem; }
+ /* drop the fixed mute-button width on phones so the row fits */
+ #btn-mute { width: auto; padding: 0.45rem 0.9rem; }
+ }
@@ -653,8 +660,8 @@ else wirePuppet();