fix: stickers panel (#553)

* fixes to the stickers panel

* Reduce padding on the sides to save space

2 files changed, 61 insertions, 12 deletions

diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx
index 937a968e..7d3e073e 100644
--- a/apps/web/src/components/editor/media-panel/views/stickers.tsx
+++ b/apps/web/src/components/editor/media-panel/views/stickers.tsx
@@ -80,25 +80,25 @@ export function StickersView() {
         <Separator className="my-4" />
         <TabsContent
           value="all"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
         >
           <StickersContentView category="all" />
         </TabsContent>
         <TabsContent
           value="general"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
         >
           <StickersContentView category="general" />
         </TabsContent>
         <TabsContent
           value="brands"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
         >
           <StickersContentView category="brands" />
         </TabsContent>
         <TabsContent
           value="emoji"
-          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
         >
           <StickersContentView category="emoji" />
         </TabsContent>
@@ -111,16 +111,22 @@ function StickerGrid({
   icons,
   onAdd,
   addingSticker,
+  capSize = false,
 }: {
   icons: string[];
   onAdd: (iconName: string) => void;
   addingSticker: string | null;
+  capSize?: boolean;
 }) {
   return (
     <div
       className="grid gap-2"
       style={{
-        gridTemplateColumns: "repeat(auto-fill, 112px)",
+        gridTemplateColumns: capSize
+          ? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
+          : "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
+        ["--sticker-min" as any]: "96px",
+        ...(capSize ? ({ ["--sticker-max"]: "160px" } as any) : {}),
       }}
     >
       {icons.map((iconName) => (
@@ -129,6 +135,7 @@ function StickerGrid({
           iconName={iconName}
           onAdd={onAdd}
           isAdding={addingSticker === iconName}
+          capSize={capSize}
         />
       ))}
     </div>
@@ -148,7 +155,7 @@ function CollectionGrid({
   onSelectCollection: (prefix: string) => void;
 }) {
   return (
-    <div className="grid grid-cols-1 gap-2 h-full overflow-hidden">
+    <div className="grid grid-cols-1 gap-2">
       {collections.map((collection) => (
         <CollectionItem
           key={collection.prefix}
@@ -198,6 +205,7 @@ function StickersContentView({ category }: { category: StickerCategory }) {
     searchStickers,
     downloadSticker,
     clearRecentStickers,
+    setSelectedCategory,
   } = useStickersStore();
 
   const [addingSticker, setAddingSticker] = useState<string | null>(null);
@@ -363,7 +371,15 @@ function StickersContentView({ category }: { category: StickerCategory }) {
               setSelectedCollection(null);
             }
           }}
-          placeholder="Search icons..."
+          placeholder={
+            category === "all"
+              ? "Search all stickers"
+              : category === "general"
+                ? "Search icons"
+                : category === "brands"
+                  ? "Search brands"
+                  : "Search Emojis"
+          }
           value={localSearchQuery}
           onChange={setLocalSearchQuery}
         />
@@ -401,6 +417,7 @@ function StickersContentView({ category }: { category: StickerCategory }) {
                   icons={recentStickers.slice(0, 12)}
                   onAdd={handleAddSticker}
                   addingSticker={addingSticker}
+                  capSize
                 />
               </div>
             )}
@@ -442,12 +459,32 @@ function StickersContentView({ category }: { category: StickerCategory }) {
                       icons={iconsToDisplay}
                       onAdd={handleAddSticker}
                       addingSticker={addingSticker}
+                      capSize
                     />
                   </>
                 ) : searchQuery ? (
-                  <EmptyView
-                    message={`No stickers found for "${searchQuery}"`}
-                  />
+                  <div className="flex flex-col items-center justify-center py-8 gap-3">
+                    <EmptyView
+                      message={`No stickers found for "${searchQuery}"`}
+                    />
+                    {category !== "all" && (
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          const q = localSearchQuery || searchQuery;
+                          if (q) {
+                            setSearchQuery(q);
+                          }
+                          setSelectedCategory("all");
+                          if (q) {
+                            searchStickers(q);
+                          }
+                        }}
+                      >
+                        Search in all icons
+                      </Button>
+                    )}
+                  </div>
                 ) : null}
               </div>
             )}
@@ -525,9 +562,10 @@ interface StickerItemProps {
   iconName: string;
   onAdd: (iconName: string) => void;
   isAdding?: boolean;
+  capSize?: boolean;
 }
 
-function StickerItem({ iconName, onAdd, isAdding }: StickerItemProps) {
+function StickerItem({ iconName, onAdd, isAdding, capSize = false }: StickerItemProps) {
   const [imageError, setImageError] = useState(false);
   const [hostIndex, setHostIndex] = useState(0);
 
@@ -561,6 +599,11 @@ function StickerItem({ iconName, onAdd, isAdding }: StickerItemProps) {
         width={64}
         height={64}
         className="w-full h-full object-contain"
+        style={
+          capSize
+            ? { maxWidth: "var(--sticker-max, 160px)", maxHeight: "var(--sticker-max, 160px)" }
+            : undefined
+        }
         onError={() => {
           const next = hostIndex + 1;
           if (next < ICONIFY_HOSTS.length) {
@@ -598,6 +641,7 @@ function StickerItem({ iconName, onAdd, isAdding }: StickerItemProps) {
             rounded={true}
             variant="card"
             className=""
+            containerClassName="w-full"
             isDraggable={false}
           />
           {isAdding && (
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index 92aa677b..f6d5c696 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -21,6 +21,7 @@ export interface DraggableMediaItemProps {
   onAddToTimeline?: (currentTime: number) => void;
   aspectRatio?: number;
   className?: string;
+  containerClassName?: string;
   showPlusOnDrag?: boolean;
   showLabel?: boolean;
   rounded?: boolean;
@@ -36,6 +37,7 @@ export function DraggableMediaItem({
   onAddToTimeline,
   aspectRatio = 16 / 9,
   className = "",
+  containerClassName,
   showPlusOnDrag = true,
   showLabel = true,
   rounded = true,
@@ -95,7 +97,10 @@ export function DraggableMediaItem({
   return (
     <>
       {variant === "card" ? (
-        <div ref={dragRef} className="relative group w-28 h-28">
+        <div
+          ref={dragRef}
+          className={cn("relative group", containerClassName ?? "w-28 h-28")}
+        >
           <div
             className={`flex flex-col gap-1 p-0 h-auto w-full relative cursor-default ${className}`}
           >