fix(web): user management responsive design (#5698)

* fix: user management tailwind

* use top instead of inset-y-0

* add types to createEventDispatcher

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -50,7 +50,12 @@
   let message = '';
   let isSendingMessage = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    deleteComment: void;
+    deleteLike: void;
+    addComment: void;
+    close: void;
+  }>();
 
   $: showDeleteReaction = Array(reactions.length).fill(false);
   $: {

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -725,9 +725,9 @@
         albumId={album?.id}
         albums={appearsInAlbums}
         on:close={() => ($isShowDetail = false)}
-        on:close-viewer={handleCloseViewer}
-        on:description-focus-in={disableKeyDownEvent}
-        on:description-focus-out={enableKeyDownEvent}
+        on:closeViewer={handleCloseViewer}
+        on:descriptionFocusIn={disableKeyDownEvent}
+        on:descriptionFocusOut={enableKeyDownEvent}
       />
     </div>
   {/if}

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -87,7 +87,13 @@
     unsubscribe();
   });
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    descriptionFocusIn: void;
+    descriptionFocusOut: void;
+    click: AlbumResponseDto;
+    closeViewer: void;
+  }>();
 
   const getMegapixel = (width: number, height: number): number | undefined => {
     const megapixel = Math.round((height * width) / 1_000_000);
@@ -114,11 +120,11 @@
   };
 
   const handleFocusIn = () => {
-    dispatch('description-focus-in');
+    dispatch('descriptionFocusIn');
   };
 
   const handleFocusOut = async () => {
-    dispatch('description-focus-out');
+    dispatch('descriptionFocusOut');
     try {
       await api.assetApi.updateAsset({
         id: asset.id,
@@ -241,7 +247,7 @@
                 href="{AppRoute.PEOPLE}/{person.id}?previousRoute={albumId
                   ? `${AppRoute.ALBUMS}/${albumId}`
                   : AppRoute.PHOTOS}"
-                on:click={() => dispatch('close-viewer')}
+                on:click={() => dispatch('closeViewer')}
               >
                 <div class="relative">
                   <ImageThumbnail

web/src/lib/components/asset-viewer/intersection-observer.svelte

@@ -11,7 +11,13 @@
 
   let intersecting = false;
   let container: HTMLDivElement;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    hidden: HTMLDivElement;
+    intersected: {
+      container: HTMLDivElement;
+      position: BucketPosition;
+    };
+  }>();
 
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {