Clean up the overlays CSS.

src/overlay/RecordingOverlay.css

@@ -1,9 +1,8 @@
 .recording-overlay {
     height: 40px;
-    width: fit-content;
+    width: 160px;
-    min-width: 160px;
+    display: grid;
-    display: flex;
+    grid-template-columns: auto 1fr auto;
-    gap: 12px;
     align-items: center;
     padding-left: 6px;
     padding-right: 6px;
@@ -13,6 +12,23 @@
     transition: opacity 300ms ease-out;
 }
 
+.overlay-left {
+    display: flex;
+    align-items: center;
+}
+
+.overlay-middle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.overlay-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
 .bars-container {
     display: flex;
     align-items: end;

src/overlay/RecordingOverlay.tsx

@@ -63,6 +63,7 @@ const RecordingOverlay: React.FC = () => {
 
   return (
     <div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
+      <div className="overlay-left">
         <img
           width="28"
           height="28"
@@ -70,6 +71,9 @@ const RecordingOverlay: React.FC = () => {
           alt={getIconAlt()}
           style={{}}
         />
+      </div>
+
+      <div className="overlay-middle">
         {state === "recording" && (
           <div className="bars-container">
             {levels.map((v, i) => (
@@ -85,6 +89,12 @@ const RecordingOverlay: React.FC = () => {
             ))}
           </div>
         )}
+        {state === "transcribing" && (
+          <div className="transcribing-text">Transcribing...</div>
+        )}
+      </div>
+
+      <div className="overlay-right">
         {state === "recording" && (
           <div
             className="cancel-button"
@@ -103,9 +113,7 @@ const RecordingOverlay: React.FC = () => {
             </svg>
           </div>
         )}
-      {state === "transcribing" && (
+      </div>
-        <div className="transcribing-text">Transcribing...</div>
-      )}
     </div>
   );
 };