feat(web,a11y): consolidate BaseModal into FullScreenModal (#8787)

* feat(web,a11y): FullScreenModal sticky buttons

* chore(web): combine BaseModal into FullScreenModal

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -29,6 +29,7 @@
   export let width: 'wide' | 'narrow' | 'auto' = 'narrow';
 
   $: titleId = `${id}-title`;
+  $: isStickyBottom = !!$$slots['sticky-bottom'];
 
   let modalWidth: string;
   $: {
@@ -50,15 +51,25 @@
   >
     <div
       class="z-[9999] max-w-[95vw] max-h-[95vh] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+      style="max-height: min(95vh, 900px);"
       use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
       tabindex="-1"
       aria-modal="true"
       aria-labelledby={titleId}
+      class:scroll-pb-40={isStickyBottom}
+      class:sm:scroll-p-24={isStickyBottom}
     >
       <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
       <div class="p-5 pt-0">
         <slot />
       </div>
+      {#if isStickyBottom}
+        <div
+          class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
+        >
+          <slot name="sticky-bottom" />
+        </div>
+      {/if}
     </div>
   </section>
 </FocusTrap>