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/shared-components/album-selection-modal.svelte

@@ -12,7 +12,18 @@
   let loading = true;
   let search = '';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    newAlbum: {
+      albumName: string;
+    };
+    album: {
+      album: AlbumResponseDto;
+    };
+    newSharedAlbum: {
+      albumName: string;
+    };
+    close: void;
+  }>();
 
   export let shared: boolean;
 

web/src/lib/components/shared-components/base-modal.svelte

@@ -7,7 +7,10 @@
   import { clickOutside } from '$lib/utils/click-outside';
   import { mdiClose } from '@mdi/js';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    escape: void;
+    close: void;
+  }>();
   export let zIndex = 9999;
   export let ignoreClickOutside = false;
 

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -29,7 +29,10 @@
   let canCopyImagesToClipboard = true;
   let enablePassword = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    escape: void;
+  }>();
 
   const expiredDateOption: ImmichDropDownOption = {
     default: 'Never',

web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte

@@ -11,7 +11,9 @@
   let viewWidth: number;
   $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
 
-  let dispatch = createEventDispatcher();
+  let dispatch = createEventDispatcher<{
+    select: { asset: AssetResponseDto; selectedAssets: Set<AssetResponseDto> };
+  }>();
 
   const selectAssetHandler = (event: CustomEvent) => {
     const { asset }: { asset: AssetResponseDto } = event.detail;

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -16,7 +16,10 @@
 
   let isShowSelectAvatar = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    logout: void;
+    close: void;
+  }>();
 
   const handleSaveProfile = async (color: UserAvatarColor) => {
     try {

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -8,7 +8,10 @@
 
   export let user: UserResponseDto;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    choose: UserAvatarColor;
+  }>();
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
 

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -23,7 +23,9 @@
   let shouldShowAccountInfo = false;
   let shouldShowAccountInfoPanel = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    uploadClicked: void;
+  }>();
 
   const logOut = async () => {
     const { data } = await api.authenticationApi.logout();

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -10,7 +10,9 @@
 
   export let asset: AssetResponseDto;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+  }>();
   let imgElement: HTMLDivElement;
 
   onMount(() => {

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -19,7 +19,9 @@
       { key: ['Del'], action: 'Delete Asset' },
     ],
   };
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+  }>();
 </script>
 
 <FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>

web/src/lib/components/shared-components/side-bar/side-bar-button.svelte

@@ -11,7 +11,9 @@
 
   let showMoreInformation = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    selected: void;
+  }>();
   const onButtonClicked = () => dispatch('selected');
 </script>