Simplify media toggle symbols

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) => {

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>

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;
   }
 }