From 6701ccc9b4a81b7bf61ae9df8a303b014382f402 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 15 Mar 2026 02:39:52 +0100
Subject: [PATCH] fix: emoji picker uses full panel width with no dead space

Remove width: 100% !important override that fought emoji-mart's shadow
DOM grid. Container now uses w-fit to wrap content tightly. GIF picker
gets explicit w-[390px] to maintain its own width independently.
---
 packages/web/src/components/chat/GifPicker.tsx   |  2 +-
 .../web/src/components/chat/InputPopover.tsx     | 16 ++--------------
 packages/web/src/styles/globals.css              |  1 -
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/components/chat/GifPicker.tsx b/packages/web/src/components/chat/GifPicker.tsx
index 44f25719..a917a982 100644
--- a/packages/web/src/components/chat/GifPicker.tsx
+++ b/packages/web/src/components/chat/GifPicker.tsx
@@ -79,7 +79,7 @@ export function GifPicker({ onGifSelect }: GifPickerProps) {
   };
 
   return (
-    <div className="flex flex-col h-[390px]" onKeyDown={handleKeyDown}>
+    <div className="flex flex-col h-[390px] w-[390px]" onKeyDown={handleKeyDown}>
       {/* Search */}
       <div className="px-3 pt-2 pb-1.5">
         <input
diff --git a/packages/web/src/components/chat/InputPopover.tsx b/packages/web/src/components/chat/InputPopover.tsx
index ea839bd6..e8b0f71c 100644
--- a/packages/web/src/components/chat/InputPopover.tsx
+++ b/packages/web/src/components/chat/InputPopover.tsx
@@ -2,20 +2,16 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { EmojiPicker } from './EmojiPicker';
 import { GifPicker } from './GifPicker';
-import { StickerPicker } from './StickerPicker';
-import type { Sticker } from '@backspace/shared';
 
-export type InputPopoverTab = 'emoji' | 'gif' | 'stickers';
+export type InputPopoverTab = 'emoji' | 'gif';
 
 interface InputPopoverProps {
   activeTab: InputPopoverTab;
   onClose: () => void;
   onEmojiSelect: (emoji: { native: string }) => void;
   onGifSelect: (url: string) => void;
-  onStickerSelect: (sticker: Sticker) => void;
   anchorRef: React.RefObject<HTMLElement | null>;
   gifEnabled: boolean;
-  stickersEnabled: boolean;
   onTabChange: (tab: InputPopoverTab) => void;
 }
 
@@ -24,10 +20,8 @@ export function InputPopover({
   onClose,
   onEmojiSelect,
   onGifSelect,
-  onStickerSelect,
   anchorRef,
   gifEnabled,
-  stickersEnabled,
   onTabChange,
 }: InputPopoverProps) {
   const floatingRef = useRef<HTMLDivElement>(null);
@@ -105,9 +99,6 @@ export function InputPopover({
   if (gifEnabled) {
     availableTabs.splice(0, 0, { key: 'gif', label: 'GIF' });
   }
-  if (stickersEnabled) {
-    availableTabs.push({ key: 'stickers', label: 'Stickers' });
-  }
 
   const showTabs = availableTabs.length > 1;
 
@@ -117,7 +108,7 @@ export function InputPopover({
       className="fixed z-[300] animate-slide-up"
       style={{ top: -9999, left: -9999 }}
     >
-      <div className="glass rounded-xl overflow-hidden flex flex-col" style={{ width: 352, maxHeight: 435 }}>
+      <div className="glass rounded-xl overflow-hidden flex flex-col w-fit max-h-[435px]">
         {/* Tab bar */}
         {showTabs && (
           <div className="flex items-center gap-0.5 px-2 pt-2 pb-1">
@@ -145,9 +136,6 @@ export function InputPopover({
           {activeTab === 'gif' && gifEnabled && (
             <GifPicker onGifSelect={onGifSelect} />
           )}
-          {activeTab === 'stickers' && stickersEnabled && (
-            <StickerPicker onStickerSelect={onStickerSelect} />
-          )}
         </div>
       </div>
     </div>,
diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css
index 13552da7..f5758d52 100644
--- a/packages/web/src/styles/globals.css
+++ b/packages/web/src/styles/globals.css
@@ -303,7 +303,6 @@
   --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   border: none !important;
   background: transparent !important;
-  width: 100% !important;
   max-height: 400px;
 }