From 5ad901ca4f70ba0b97e30e0bf5f5e2782770ab43 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 23:41:59 +0200
Subject: [PATCH] fix: add viewport margin to all modal dialogs

---
 src/views/Clients.vue  | 8 ++++----
 src/views/Entries.vue  | 4 ++--
 src/views/Invoices.vue | 8 ++++----
 src/views/Projects.vue | 8 ++++----
 src/views/Settings.vue | 4 ++--
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/views/Clients.vue b/src/views/Clients.vue
index 9ca70df..6011bf0 100644
--- a/src/views/Clients.vue
+++ b/src/views/Clients.vue
@@ -67,10 +67,10 @@
     <!-- Create/Edit Dialog -->
     <div
       v-if="showDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="closeDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter max-h-[85vh] overflow-y-auto">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
           {{ editingClient ? 'Edit Client' : 'Create Client' }}
         </h2>
@@ -205,10 +205,10 @@
     <!-- Delete Confirmation Dialog -->
     <div
       v-if="showDeleteDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Client</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete "{{ clientToDelete?.name }}"? This action cannot be undone.
diff --git a/src/views/Entries.vue b/src/views/Entries.vue
index 7e9dd0d..9990929 100644
--- a/src/views/Entries.vue
+++ b/src/views/Entries.vue
@@ -216,10 +216,10 @@
     <!-- Delete Confirmation Dialog -->
     <div
       v-if="showDeleteDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Entry</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete this time entry? This action cannot be undone.
diff --git a/src/views/Invoices.vue b/src/views/Invoices.vue
index 5be23a0..d8807ff 100644
--- a/src/views/Invoices.vue
+++ b/src/views/Invoices.vue
@@ -232,10 +232,10 @@
     <!-- Invoice Detail Dialog -->
     <div
       v-if="showDetailDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showDetailDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto animate-modal-enter">
         <div class="flex items-start justify-between mb-6">
           <div>
             <h2 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">{{ selectedInvoice?.invoice_number }}</h2>
@@ -302,10 +302,10 @@
     <!-- Delete Confirmation Dialog -->
     <div
       v-if="showDeleteDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showDeleteDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Invoice</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index b7e7024..1aff996 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -68,10 +68,10 @@
     <!-- Create/Edit Dialog -->
     <div
       v-if="showDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="closeDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
           {{ editingProject ? 'Edit Project' : 'Create Project' }}
         </h2>
@@ -165,10 +165,10 @@
     <!-- Delete Confirmation Dialog -->
     <div
       v-if="showDeleteDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Project</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone.
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 12610a5..bc9b3ab 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -203,10 +203,10 @@
     <!-- Clear Data Confirmation Dialog -->
     <div
       v-if="showClearDataDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showClearDataDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
         <p class="text-[0.75rem] text-text-secondary mb-4">
           Are you sure? This action cannot be undone.