feat: improved layout and captions

js/src/features/compose/controls-indicator.tsx

@@ -2,17 +2,36 @@ import { Video, Mic } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
 import { Button } from "@/components/ui/button";
-import { PropsWithChildren } from "react";
 
-interface ControlsIndicatorProps extends PropsWithChildren {
+interface ControlsIndicatorProps {
   type: "reply" | "new";
 }
-export default function ControlsIndicator({ type, children }: ControlsIndicatorProps) {
+export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
   const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
   const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
   return (
-    <div className="flex items-center gap-2 text-xs rounded-full pl-1 pr-3 py-1 bg-black/30 backdrop-blur-sm m-2">
+    <div className="flex items-center gap-2 text-xs rounded-full pl-2 pr-1 py-1 bg-black/30 backdrop-blur-sm">
+      <div className="text-muted-foreground">
+        Hold{" "}
+        <kbd
+          className={cn(
+            "bg-muted rounded px-1.5 py-0.5 font-mono",
+          )}
+        >
+          `
+        </kbd>{" "}
+        to {type === "reply" ? "reply " : "start "}
+        · Press{" "}
+        <kbd
+          className={cn(
+            "bg-muted rounded px-1.5 py-0.5 font-mono",
+          )}
+        >
+          T
+        </kbd>{" "}
+        for text
+      </div>
       <Button
         onClick={() =>
           setRecordingMode(recordingMode === "video" ? "audio" : "video")
@@ -40,29 +59,6 @@ export default function ControlsIndicator({ type, children }: ControlsIndicatorP
           </>
         )}
       </Button>
-      {children ? <div className="flex-1">{children}</div> :
-        <div className="flex-1" />
-      }
-      <div className="text-muted-foreground">
-        Hold{" "}
-        <kbd
-          className={cn(
-            "bg-muted rounded px-1.5 py-0.5 font-mono",
-          )}
-        >
-          `
-        </kbd>{" "}
-        to {type === "reply" ? "reply " : "start "}
-        · Press{" "}
-        <kbd
-          className={cn(
-            "bg-muted rounded px-1.5 py-0.5 font-mono",
-          )}
-        >
-          T
-        </kbd>{" "}
-        for text
-      </div>
     </div>
   );
 }