Fix bottom tab bar color clipping after comment drawer opens (#14224)

## Summary

The comment drawer rendered a white `Box` overlay over the bottom safe
area
(to color the gap below the `BottomSheetFooter`, which uses
`bottomInset={insets.bottom}`).
That Box was rendered alongside the modal in JSX, so it stayed mounted
after
the drawer was dismissed and covered the bottom tab bar's safe-area
padding —
which uses `surface1` (`neutral.n25`), not pure `white` — producing a
visible
color seam at the bottom of the screen once the drawer had been opened.

The fix only renders the overlay while the drawer is actually visible by
tracking the bottom-sheet index in `onChange` (`index >= 0` ⇒ visible).

- File: `packages/mobile/src/components/comments/CommentDrawer.tsx`

## Test plan

- [ ] Open the app, scroll the trending feed, and confirm the bottom tab
bar's safe-area region matches the bar's `surface1` color (no white seam
at the bottom).
- [ ] Open a track's comments drawer, then dismiss it. Confirm the
bottom tab bar returns to a uniform color (no white strip).
- [ ] Open the comments drawer fully — the area beneath the input footer
should still be white (continuous with the footer), confirming the
overlay still works while the drawer is open.
- [ ] Repeat on iOS and Android with both light and dark themes.

https://claude.ai/code/session_01ALEgYGfS29Q87MXTMqCP2s

---
_Generated by [Claude
Code](https://claude.ai/code/session_01ALEgYGfS29Q87MXTMqCP2s)_

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: dylanjeffers

.changeset/fix-bottom-bar-clipping.md

@@ -0,0 +1,5 @@
+---
+'@audius/mobile': patch
+---
+
+Fix bottom tab bar color clipping after the comment drawer opens. The drawer rendered a white overlay over the bottom safe area to color the gap below its footer, but it was kept mounted after dismissal and covered the tab bar's surface1 padding, leaving a visible color seam at the bottom. The overlay now only renders while the drawer is visible.

packages/mobile/src/components/comments/CommentDrawer.tsx

@@ -245,6 +245,7 @@ export const CommentDrawer = (props: CommentDrawerProps) => {
   const [acText, setAcText] = useState('')
   const [replyingAndEditingState, setReplyingAndEditingState] =
     useState<ReplyingAndEditingState>()
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false)
 
   const setAutocompleteHandler = useCallback(
     (autocompleteHandler: (user: UserMetadata) => void) => {
@@ -298,6 +299,7 @@ export const CommentDrawer = (props: CommentDrawerProps) => {
 
   const handleSheetChanges = useCallback(
     (index: number) => {
+      setIsDrawerVisible(index >= 0)
       // When the sheet first opens (index >= 0), snap to index 1 (85%) if it's at index 0 (50%)
       if (index === 0 && bottomSheetModalRef.current) {
         // Use a small delay to ensure the modal is fully presented
@@ -360,16 +362,18 @@ export const CommentDrawer = (props: CommentDrawerProps) => {
           )}
         </CommentSectionProvider>
       </BottomSheetModal>
-      <Box
-        style={{
-          backgroundColor: color.background.white,
-          position: 'absolute',
-          bottom: 0,
-          width: '100%',
-          zIndex: 5,
-          height: insets.bottom
-        }}
-      />
+      {isDrawerVisible ? (
+        <Box
+          style={{
+            backgroundColor: color.background.white,
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+            zIndex: 5,
+            height: insets.bottom
+          }}
+        />
+      ) : null}
     </>
   )
 }