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

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))
+    };
+  }
 }