From acaedff73cd1352e8104f427684fbbba2a176670 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 8 Apr 2026 17:13:47 -0700
Subject: [PATCH] fix: improve visibility of keyboard hints

During compose video or screen recording, the keyboard hints were
invisible if the content was super bright.
---
 js/src/features/compose/recording-overlay.tsx | 5 +++++
 js/src/features/particles/stream-view.tsx     | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/js/src/features/compose/recording-overlay.tsx b/js/src/features/compose/recording-overlay.tsx
index bf69b41..195d2cd 100644
--- a/js/src/features/compose/recording-overlay.tsx
+++ b/js/src/features/compose/recording-overlay.tsx
@@ -191,6 +191,11 @@ export function RecordingOverlay({
         />
       )}
 
+      {/* Bottom gradient scrim for keyboard hint readability */}
+      {(isRecording || isReviewing) && !isLoading && (
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
+      )}
+
       {/* Top center: recording indicator */}
       <div className="absolute top-8 z-10">
         {isRecording && !isLoading ? (
diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index e2db8a1..68a8d2b 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -436,6 +436,9 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         disabled={streamParticle.status === "closed"}
       />
 
+      {/* Bottom gradient safe zone for keyboard hints */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
+
       {/* BottomBar */}
       <BottomBar
         visible={controlsVisible}