From b08bbbdab9c9184b1c0d0865dcd2d6b59cc5f64c Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 8 Sep 2025 21:56:51 +0200
Subject: [PATCH] Enable modal switching with smooth slide transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/routes/cospend/+layout.svelte b/src/routes/cospend/+layout.svelte
index 88a7120..a743158 100644
--- a/src/routes/cospend/+layout.svelte
+++ b/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,7 +43,11 @@
   <div class="side-panel">
     {#if showModal}
       <div class="modal-content">
-        <PaymentModal {paymentId} on:close={() => showModal = false} />
+        {#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>
@@ -82,19 +88,17 @@
   }
 
   .modal-content {
-    opacity: 0;
-    animation: fadeIn 0.3s ease-out 0.1s forwards;
+    position: relative;
+    height: 100%;
   }
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateX(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
+  .modal-content > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
   }
 
   @media (max-width: 768px) {