Enable modal switching with smooth slide transitions

- Allow clicking between payments in recent activities while modal is open
- Add fly transition for seamless horizontal slide animation
- Use absolute positioning to prevent modal stacking issues
- Replace fadeIn animation with proper slide-in-from-right effect

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/routes/cospend/+layout.svelte

@@ -2,6 +2,8 @@
   import { page } from '$app/stores';
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
+  import { fly } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
   import PaymentModal from '$lib/components/PaymentModal.svelte';
 
   let showModal = false;
@@ -41,8 +43,12 @@
   <div class="side-panel">
     {#if showModal}
       <div class="modal-content">
+        {#key paymentId}
+          <div in:fly={{x: 50, duration: 300, easing: quintOut}} out:fly={{x: -50, duration: 300, easing: quintOut}}>
             <PaymentModal {paymentId} on:close={() => showModal = false} />
           </div>
+        {/key}
+      </div>
     {/if}
   </div>
 </div>
@@ -82,19 +88,17 @@
   }
 
   .modal-content {
-    opacity: 0;
+    position: relative;
-    animation: fadeIn 0.3s ease-out 0.1s forwards;
+    height: 100%;
   }
 
-  @keyframes fadeIn {
+  .modal-content > div {
-    from {
+    position: absolute;
-      opacity: 0;
+    top: 0;
-      transform: translateX(20px);
+    left: 0;
-    }
+    right: 0;
-    to {
+    bottom: 0;
-      opacity: 1;
+    overflow-y: auto;
-      transform: translateX(0);
-    }
   }
 
   @media (max-width: 768px) {