From a97d861f416eb6e29861bf4655c3dd4c50ff3671 Mon Sep 17 00:00:00 2001
From: CJ Pais <cj@cjpais.com>
Date: Fri, 1 Aug 2025 16:03:04 -0700
Subject: [PATCH] Clean up the overlays CSS.

---
 src/overlay/RecordingOverlay.css | 24 ++++++--
 src/overlay/RecordingOverlay.tsx | 94 +++++++++++++++++---------------
 2 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/src/overlay/RecordingOverlay.css b/src/overlay/RecordingOverlay.css
index 431d792..fb3c72f 100644
--- a/src/overlay/RecordingOverlay.css
+++ b/src/overlay/RecordingOverlay.css
@@ -1,9 +1,8 @@
 .recording-overlay {
     height: 40px;
-    width: fit-content;
-    min-width: 160px;
-    display: flex;
-    gap: 12px;
+    width: 160px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
     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;
diff --git a/src/overlay/RecordingOverlay.tsx b/src/overlay/RecordingOverlay.tsx
index 039815a..6995f74 100644
--- a/src/overlay/RecordingOverlay.tsx
+++ b/src/overlay/RecordingOverlay.tsx
@@ -63,49 +63,57 @@ const RecordingOverlay: React.FC = () => {
 
   return (
     <div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
-      <img
-        width="28"
-        height="28"
-        src={getIconPath()}
-        alt={getIconAlt()}
-        style={{}}
-      />
-      {state === "recording" && (
-        <div className="bars-container">
-          {levels.map((v, i) => (
-            <div
-              key={i}
-              className="bar"
-              style={{
-                height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual
-                transition: "height 60ms ease-out",
-                opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility
-              }}
-            />
-          ))}
-        </div>
-      )}
-      {state === "recording" && (
-        <div
-          className="cancel-button"
-          onClick={() => {
-            invoke("cancel_operation");
-          }}
-        >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-            <path
-              d="M9 3L3 9M3 3L9 9"
-              stroke="white"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </div>
-      )}
-      {state === "transcribing" && (
-        <div className="transcribing-text">Transcribing...</div>
-      )}
+      <div className="overlay-left">
+        <img
+          width="28"
+          height="28"
+          src={getIconPath()}
+          alt={getIconAlt()}
+          style={{}}
+        />
+      </div>
+
+      <div className="overlay-middle">
+        {state === "recording" && (
+          <div className="bars-container">
+            {levels.map((v, i) => (
+              <div
+                key={i}
+                className="bar"
+                style={{
+                  height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual
+                  transition: "height 60ms ease-out",
+                  opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility
+                }}
+              />
+            ))}
+          </div>
+        )}
+        {state === "transcribing" && (
+          <div className="transcribing-text">Transcribing...</div>
+        )}
+      </div>
+
+      <div className="overlay-right">
+        {state === "recording" && (
+          <div
+            className="cancel-button"
+            onClick={() => {
+              invoke("cancel_operation");
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+              <path
+                d="M9 3L3 9M3 3L9 9"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
     </div>
   );
 };