feat: Response mobile layout support v1

toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html

@@ -40,31 +40,43 @@
   </div>
 
   @if (showKlipyGifPicker()) {
-    <div
-      class="fixed inset-0 z-[89]"
-      (click)="closeKlipyGifPicker()"
-      (keydown.enter)="closeKlipyGifPicker()"
-      (keydown.space)="closeKlipyGifPicker()"
-      tabindex="0"
-      role="button"
-      aria-label="Close GIF picker"
-      style="-webkit-app-region: no-drag"
-    ></div>
-
-    <div class="pointer-events-none fixed inset-0 z-[90]">
+    @if (isMobile()) {
+      <app-bottom-sheet (dismissed)="closeKlipyGifPicker()">
+        <div appThemeNode="chatGifPickerSurface">
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
+      </app-bottom-sheet>
+    } @else {
       <div
-        appThemeNode="chatGifPickerSurface"
-        class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
-        [style.bottom.px]="composerBottomPadding() + 8"
-        [style.right.px]="klipyGifPickerAnchorRight()"
-      >
-        <app-klipy-gif-picker
-          [signalSource]="currentRoom()"
-          (gifSelected)="handleKlipyGifSelected($event)"
-          (closed)="closeKlipyGifPicker()"
-        />
+        class="fixed inset-0 z-[89]"
+        (click)="closeKlipyGifPicker()"
+        (keydown.enter)="closeKlipyGifPicker()"
+        (keydown.space)="closeKlipyGifPicker()"
+        tabindex="0"
+        role="button"
+        aria-label="Close GIF picker"
+        style="-webkit-app-region: no-drag"
+      ></div>
+
+      <div class="pointer-events-none fixed inset-0 z-[90]">
+        <div
+          appThemeNode="chatGifPickerSurface"
+          class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
+          [style.bottom.px]="composerBottomPadding() + 8"
+          [style.right.px]="klipyGifPickerAnchorRight()"
+        >
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
       </div>
-    </div>
+    }
   }
 
   <app-chat-message-overlays