Fix char counter not showing properly on Firefox

src/app.css

@@ -2026,27 +2026,26 @@ body > .szh-menu-container {
   text-shadow: none;
 }
 
-/* DONUT METER */
+/* CHAR COUNTER */
 
-meter.donut {
+.char-counter {
-  appearance: none;
-}
-
-meter.donut::-webkit-meter-inner-element,
-meter.donut::-webkit-meter-bar,
-meter.donut::-webkit-meter-optimum-value,
-meter.donut::-webkit-meter-suboptimum-value,
-meter.donut::-webkit-meter-even-less-good-value {
-  display: none;
-}
-
-meter.donut::-moz-meter-bar {
-  background: transparent;
-}
-
-meter.donut {
-  position: relative;
   --dimension: 24px;
+  min-width: var(--dimension);
+  min-height: var(--dimension);
+  position: relative;
+  display: inline-block;
+
+  &[hidden] {
+    visibility: hidden;
+  }
+
+  * {
+    pointer-events: none;
+  }
+
+  meter {
+    appearance: none;
+    position: relative;
     --border-width: 2px;
     --middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width));
     width: var(--dimension);
@@ -2063,34 +2062,50 @@ meter.donut {
       conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
     transform: scale(0.7);
     transition: transform 0.2s ease-in-out;
-}
+
-meter.donut.warning {
+    &::-webkit-meter-inner-element,
+    &::-webkit-meter-bar,
+    &::-webkit-meter-optimum-value,
+    &::-webkit-meter-suboptimum-value,
+    &::-webkit-meter-even-less-good-value {
+      display: none;
+    }
+
+    &::-moz-meter-bar {
+      background: transparent;
+    }
+
+    &.warning {
       --color: var(--orange-color);
       transform: scale(1);
-}
+    }
-meter.donut.danger {
+    &.danger {
       --color: var(--red-color);
       transform: scale(1);
-}
+    }
-meter.donut.explode {
+    &.explode {
       background-image: none;
       transform: scale(1);
-}
+    }
-meter.donut:is(.warning, .danger, .explode):after {
+    &:is(.warning, .danger, .explode) + .counter {
-  content: attr(data-left);
+      opacity: 1;
+      color: var(--text-insignificant-color);
+    }
+    &:is(.danger, .explode) + .counter {
+      opacity: 1;
+      color: var(--red-color);
+    }
+  }
+
+  .counter {
+    line-height: 1;
+    opacity: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 12px;
-  color: var(--text-insignificant-color);
+  }
-}
-meter.donut:is(.danger, .explode):after {
-  color: var(--red-color);
-}
-meter.donut[hidden] {
-  display: inline-block;
-  visibility: hidden;
 }
 
 /* SHINY PILL */

src/components/compose.jsx

@@ -1662,11 +1662,18 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
   const charCount = snapStates.composerCharacterCount;
   const leftChars = maxCharacters - charCount;
   if (hidden) {
-    return <meter class="donut" hidden />;
+    return <span class="char-counter" hidden />;
   }
   return (
+    <span
+      class="char-counter"
+      title={`${leftChars}/${maxCharacters}`}
+      style={{
+        '--percentage': (charCount / maxCharacters) * 100,
+      }}
+    >
       <meter
-      class={`donut ${
+        class={`${
           leftChars <= -10
             ? 'explode'
             : leftChars <= 0
@@ -1677,12 +1684,9 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
         }`}
         value={charCount}
         max={maxCharacters}
-      data-left={leftChars}
-      title={`${leftChars}/${maxCharacters}`}
-      style={{
-        '--percentage': (charCount / maxCharacters) * 100,
-      }}
       />
+      <span class="counter">{leftChars}</span>
+    </span>
   );
 }