From 219e62f782a7164c455c79291ed956b2f84387dd Mon Sep 17 00:00:00 2001
From: codex <codex@example.local>
Date: Tue, 9 Jun 2026 21:22:54 +0200
Subject: [PATCH] Simplify media toggle symbols

---
 public/app.js     | 1 +
 public/index.html | 4 ++--
 public/styles.css | 9 +++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/app.js b/public/app.js
index 9f373f8..81959e4 100644
--- a/public/app.js
+++ b/public/app.js
@@ -324,6 +324,7 @@ function updateToggleButton(button, enabled, enabledLabel, disabledLabel) {
   button.setAttribute("aria-pressed", String(enabled));
   button.setAttribute("aria-label", enabled ? enabledLabel : disabledLabel);
   button.title = enabled ? enabledLabel : disabledLabel;
+  button.textContent = enabled ? "●" : "○";
 }
 
 nameForm.addEventListener("submit", (event) => {
diff --git a/public/index.html b/public/index.html
index 72721d1..d095a95 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,7 +37,7 @@
                 aria-pressed="true"
                 title="Turn camera off"
               >
-                📷
+                ●
               </button>
               <label>
                 <span>Camera</span>
@@ -53,7 +53,7 @@
                 aria-pressed="true"
                 title="Mute microphone"
               >
-                🎙️
+                ●
               </button>
               <label>
                 <span>Microphone</span>
diff --git a/public/styles.css b/public/styles.css
index 15a0a7d..759d3c8 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -166,7 +166,7 @@ button[aria-pressed="false"] {
 
 .controls {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) clamp(160px, 18vw, 240px);
+  grid-template-columns: minmax(0, 1fr) 88px;
   align-items: center;
   column-gap: 20px;
   row-gap: 14px;
@@ -208,7 +208,7 @@ button[aria-pressed="false"] {
   height: 48px;
   min-width: 0;
   padding: 0;
-  font-size: 22px;
+  font-size: 24px;
   line-height: 1;
 }
 
@@ -246,6 +246,7 @@ button[aria-pressed="false"] {
   position: relative;
   overflow: hidden;
   width: 100%;
+  min-width: 88px;
   aspect-ratio: 16 / 10;
   border-radius: 8px;
   background: #1b2026;
@@ -282,7 +283,7 @@ button[aria-pressed="false"] {
 
   .self-preview {
     justify-self: center;
-    width: min(260px, 100%);
+    width: 88px;
   }
 }
 
@@ -336,6 +337,6 @@ button[aria-pressed="false"] {
   }
 
   .self-preview {
-    width: min(62vw, 220px);
+    width: 88px;
   }
 }