fix(mobile): hide SheetContent built-in close button in ChatBottomSheet to avoid duplicate X

Author: rafavalls

apps/mesh/src/web/components/chat/chat-bottom-sheet.tsx

@@ -10,6 +10,7 @@ export function ChatBottomSheet() {
       <SheetContent
         side="bottom"
         className="h-[calc(100svh-1.25rem)] p-0 rounded-t-xl border-0"
+        hideCloseButton
       >
         <ChatPanel />
       </SheetContent>

packages/ui/src/components/sheet.tsx

@@ -48,9 +48,11 @@ function SheetContent({
   className,
   children,
   side = "right",
+  hideCloseButton,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
+  hideCloseButton?: boolean;
 }) {
   return (
     <SheetPortal>
@@ -72,10 +74,12 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <X className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
+        {!hideCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <X className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
   );