Share and DocCard Ui Fixes

src/lib/components/Footer.svelte

@@ -3,7 +3,7 @@
     let { sticky = true }: { sticky?: boolean } = $props();
 </script>
 
-<footer class="mt-auto py-6 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-white/10 bg-[var(--theme-bg)] {sticky ? 'sticky bottom-0' : ''} w-full z-10 flex-shrink-0 transition-colors duration-200">
+<footer class="mt-auto py-6 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-white/10 bg-[var(--theme-bg)] {sticky ? 'sticky bottom-0 z-10' : ''} w-full flex-shrink-0 transition-colors duration-200">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center gap-4">
         <a 
             href="https://github.com/SirBlobby/TypstDrive" 

src/lib/components/ShareModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
+    import Icon from '@iconify/svelte';
     
     let { onClose, docId = undefined } = $props<{ onClose: () => void, docId?: string }>();
     
@@ -25,7 +26,19 @@
     });
     
     function copyLink() {
-        navigator.clipboard.writeText(link);
+        if (navigator.clipboard && window.isSecureContext) {
+            navigator.clipboard.writeText(link).catch(console.error);
+        } else {
+            const input = document.getElementById('share-link-input') as HTMLInputElement;
+            if (input) {
+                input.select();
+                try {
+                    document.execCommand('copy');
+                } catch (err) {
+                    console.error('Fallback copy failed', err);
+                }
+            }
+        }
         copied = true;
         setTimeout(() => copied = false, 2000);
     }
@@ -54,9 +67,15 @@
                     <button 
                         onclick={copyLink}
                         aria-label="Copy link"
-                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm min-w-[80px]"
+                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm min-w-[100px] flex items-center justify-center gap-2"
                     >
-                        {copied ? 'Copied!' : 'Copy'}
+                        {#if copied}
+                            <Icon icon="mdi:check" class="text-lg" />
+                            <span>Copied!</span>
+                        {:else}
+                            <Icon icon="mdi:content-copy" class="text-lg" />
+                            <span>Copy</span>
+                        {/if}
                     </button>
                 </div>
             </div>

src/lib/components/dashboard/DocCard.svelte

@@ -11,6 +11,25 @@
         shareItem: (item: any) => void;
         deleteDoc: (id: string, name: string) => void;
     }>();
+
+    let dropUp = $state(false);
+
+    function toggleMenu(e: MouseEvent) {
+        e.stopPropagation();
+        if (activeMenu === doc.id) {
+            setActiveMenu(null);
+        } else {
+            const button = e.currentTarget as HTMLElement;
+            const rect = button.getBoundingClientRect();
+            // If there's less than 200px below the button, open upwards
+            if (window.innerHeight - rect.bottom < 200) {
+                dropUp = true;
+            } else {
+                dropUp = false;
+            }
+            setActiveMenu(doc.id);
+        }
+    }
 </script>
 
 <div 
@@ -44,14 +63,14 @@
             <div class="relative action-menu-container">
                 <button 
                     aria-label="Document actions" 
-                    onclick={(e) => { e.stopPropagation(); setActiveMenu(activeMenu === doc.id ? null : doc.id); }} 
+                    onclick={toggleMenu} 
                     class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 pointer-events-auto"
                 >
                     <Icon icon="mdi:dots-vertical" class="text-xl" />
                 </button>
                 
                 {#if activeMenu === doc.id}
-                    <div class="absolute right-0 top-full mt-1 w-48 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
+                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
                         <button onclick={(e) => { e.stopPropagation(); openInfo(doc, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:information-outline" class="text-lg text-blue-500" />
                             View Info