Fix lint, make design more consistent, add license texts,

toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html

@@ -80,21 +80,21 @@
         </div>
       </div>
     } @else {
-      <div class="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
+      <div class="columns-[12rem] gap-4">
         @for (gif of results(); track gif.id) {
           <button
             type="button"
             (click)="selectGif(gif)"
-            class="group overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
+            class="group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
           >
             <div
-              class="relative overflow-hidden bg-secondary/30"
-              [style.aspect-ratio]="gifAspectRatio(gif)"
+              class="relative flex items-center justify-center overflow-hidden bg-secondary/30"
+              [style.height.px]="gifCardHeight(gif)"
             >
               <img
                 [appChatImageProxyFallback]="gif.previewUrl || gif.url"
                 [alt]="gif.title || 'KLIPY GIF'"
-                class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.03]"
+                class="h-full w-full object-contain p-1.5 transition-transform duration-200 group-hover:scale-[1.03]"
                 loading="lazy"
               />
               <span

toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts

@@ -23,6 +23,12 @@ import {
 import { KlipyGif, KlipyService } from '../../application/klipy.service';
 import { ChatImageProxyFallbackDirective } from '../chat-image-proxy-fallback.directive';
 
+const KLIPY_CARD_MIN_WIDTH = 140;
+const KLIPY_CARD_MAX_WIDTH = 248;
+const KLIPY_CARD_MIN_HEIGHT = 104;
+const KLIPY_CARD_MAX_HEIGHT = 220;
+const KLIPY_CARD_FALLBACK_SIZE = 160;
+
 @Component({
   selector: 'app-klipy-gif-picker',
   standalone: true,
@@ -106,12 +112,8 @@ export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy
     this.closed.emit(undefined);
   }
 
-  gifAspectRatio(gif: KlipyGif): string {
-    if (gif.width > 0 && gif.height > 0) {
-      return `${gif.width} / ${gif.height}`;
-    }
-
-    return '1 / 1';
+  gifCardHeight(gif: KlipyGif): number {
+    return this.getGifCardSize(gif).height;
   }
 
   private async loadResults(reset: boolean): Promise<void> {
@@ -182,4 +184,32 @@ export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy
       this.searchTimer = null;
     }
   }
+
+  private getGifCardSize(gif: KlipyGif): { width: number; height: number } {
+    if (gif.width <= 0 || gif.height <= 0) {
+      return {
+        width: KLIPY_CARD_FALLBACK_SIZE,
+        height: KLIPY_CARD_FALLBACK_SIZE
+      };
+    }
+
+    const maxScale = Math.min(
+      KLIPY_CARD_MAX_WIDTH / gif.width,
+      KLIPY_CARD_MAX_HEIGHT / gif.height
+    );
+    const minScale = Math.max(
+      KLIPY_CARD_MIN_WIDTH / gif.width,
+      KLIPY_CARD_MIN_HEIGHT / gif.height
+    );
+    const scale = minScale <= maxScale
+      ? Math.min(maxScale, Math.max(minScale, 1))
+      : maxScale;
+    const scaledWidth = Math.round(gif.width * scale);
+    const scaledHeight = Math.round(gif.height * scale);
+
+    return {
+      width: Math.min(KLIPY_CARD_MAX_WIDTH, Math.max(KLIPY_CARD_MIN_WIDTH, scaledWidth)),
+      height: Math.min(KLIPY_CARD_MAX_HEIGHT, Math.max(KLIPY_CARD_MIN_HEIGHT, scaledHeight))
+    };
+  }
 }