fix(web): better invite shared user to album layout (#6511)

* fix(web): better invite to album design

* rounded corner

* use icon

* padding

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -7,7 +7,7 @@
   import ImmichLogo from '../shared-components/immich-logo.svelte';
   import Button from '../elements/buttons/button.svelte';
   import { AppRoute } from '$lib/constants';
-  import { mdiLink, mdiShareCircle } from '@mdi/js';
+  import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
 
   export let album: AlbumResponseDto;
@@ -60,28 +60,25 @@
     </span>
   </svelte:fragment>
 
-  <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
-    {#if selectedUsers.length > 0}
-      <div class="mb-2 flex place-items-center gap-4 overflow-x-auto px-5 py-2">
-        <p class="font-medium">To</p>
-
-        {#each selectedUsers as user}
-          {#key user.id}
-            <button
-              on:click={() => handleUnselect(user)}
-              class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
-            >
-              <UserAvatar {user} size="sm" />
-              <p class="text-xs font-medium">{user.name}</p>
-            </button>
-          {/key}
-        {/each}
-        <div class="flex place-content-end mr-0 ml-auto p-5">
-          <Button size="sm" rounded="lg" on:click={() => dispatch('select', selectedUsers)}>Add</Button>
-        </div>
-      </div>
-    {/if}
+  {#if selectedUsers.length > 0}
+    <div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
+      <p class="font-medium">To</p>
+
+      {#each selectedUsers as user}
+        {#key user.id}
+          <button
+            on:click={() => handleUnselect(user)}
+            class="flex place-items-center gap-1 rounded-full border border-gray-500 p-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
+          >
+            <UserAvatar {user} size="sm" />
+            <p class="text-xs font-medium">{user.name}</p>
+          </button>
+        {/key}
+      {/each}
+    </div>
+  {/if}
 
+  <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
     {#if users.length > 0}
       <p class="px-5 text-xs font-medium">SUGGESTIONS</p>
 
@@ -95,7 +92,7 @@
               <div
                 class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
               >
-                <p>✓</p>
+                <Icon path={mdiCheck} size={24} />
               </div>
             {:else}
               <UserAvatar {user} size="md" />
@@ -119,7 +116,20 @@
     {/if}
   </div>
 
+  {#if users.length > 0}
+    <div class="p-3">
+      <Button
+        size="sm"
+        fullwidth
+        rounded="full"
+        disabled={!selectedUsers.length}
+        on:click={() => dispatch('select', selectedUsers)}>Add</Button
+      >
+    </div>
+  {/if}
+
   <hr />
+
   <div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
     <button
       class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"