added features and fixes

web/src/components/GiphyPicker.tsx

@@ -97,7 +97,7 @@ export function GiphyPicker({ onSelect, onClose }: GiphyPickerProps) {
   );
 
   return (
-    <div className="border border-gb-bg-t bg-gb-bg rounded font-mono text-sm flex flex-col max-h-80 w-full">
+    <div className="border border-gb-bg-t bg-gb-bg rounded font-mono text-sm flex flex-col h-72 w-full">
       {/* Header with search */}
       <div className="flex items-center gap-1 px-2 py-1.5 border-b border-gb-bg-t">
         <span className="text-gb-fg-f select-none">{'>'} search:</span>
@@ -120,7 +120,7 @@ export function GiphyPicker({ onSelect, onClose }: GiphyPickerProps) {
       </div>
 
       {/* Results grid */}
-      <div className="overflow-y-auto p-2">
+      <div className="flex-1 overflow-y-auto p-2">
         {loading && (
           <p className="text-gb-fg-f text-center py-2">[loading...]</p>
         )}
@@ -128,18 +128,18 @@ export function GiphyPicker({ onSelect, onClose }: GiphyPickerProps) {
           <p className="text-gb-fg-f text-center py-2">[no results]</p>
         )}
         {!loading && results.length > 0 && (
-          <div className="grid grid-cols-3 gap-1">
+          <div className="columns-3 gap-1 space-y-1">
             {results.map((gif) => (
               <button
                 key={gif.id}
                 type="button"
                 onClick={() => handleClick(gif)}
-                className="cursor-pointer border border-transparent hover:border-gb-orange rounded overflow-hidden focus:outline-none focus:border-gb-orange"
+                className="cursor-pointer border border-transparent hover:border-gb-orange rounded overflow-hidden focus:outline-none focus:border-gb-orange w-full break-inside-avoid block"
               >
                 <img
-                  src={gif.images.fixed_height.url}
+                  src={`/api/v1/gifs/proxy?url=${encodeURIComponent(gif.images.fixed_height.url)}`}
                   alt={gif.title || 'GIF'}
-                  className="w-full h-auto object-cover"
+                  className="w-full h-auto block"
                   loading="lazy"
                 />
               </button>