From cec08e6b42dee4b9d7aec617c8cd5e089bb1ad13 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sun, 15 Jun 2025 19:27:54 +0000
Subject: [PATCH 1/2] feature: scroll to top button, modal improvements

---
 resources/js/components/DeleteUserModal.vue | 2 +-
 resources/js/layouts/app/HeaderLayout.vue   | 5 +++++
 resources/js/layouts/app/SidebarLayout.vue  | 5 +++++
 resources/js/theme/global-pt.js             | 8 ++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/DeleteUserModal.vue b/resources/js/components/DeleteUserModal.vue
index 713a4237..2b934c97 100644
--- a/resources/js/components/DeleteUserModal.vue
+++ b/resources/js/components/DeleteUserModal.vue
@@ -30,7 +30,7 @@ const deleteUser = () => {
 <template>
     <Dialog
         v-model:visible="modalOpen"
-        class="m-4 sm:m-0 w-[40rem]"
+        class="w-[40rem]"
         position="center"
         header="Are you sure you want to delete your account?"
         :draggable="false"
diff --git a/resources/js/layouts/app/HeaderLayout.vue b/resources/js/layouts/app/HeaderLayout.vue
index 1044bea8..a777d376 100644
--- a/resources/js/layouts/app/HeaderLayout.vue
+++ b/resources/js/layouts/app/HeaderLayout.vue
@@ -76,6 +76,11 @@ const toggleMobileUserMenu = (event) => {
                         </div>
                     </template>
                 </Drawer>
+                <ScrollTop :buttonProps="{
+                    class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!',
+                    rounded: true,
+                    raised: true,
+                }" />
             </Teleport>
         </ClientOnly>
         <div class="min-h-screen">
diff --git a/resources/js/layouts/app/SidebarLayout.vue b/resources/js/layouts/app/SidebarLayout.vue
index ce88e644..89defcc4 100644
--- a/resources/js/layouts/app/SidebarLayout.vue
+++ b/resources/js/layouts/app/SidebarLayout.vue
@@ -74,6 +74,11 @@ const toggleMobileUserMenu = (event) => {
                         </div>
                     </template>
                 </Drawer>
+                <ScrollTop :buttonProps="{
+                    class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!',
+                    rounded: true,
+                    raised: true,
+                }" />
             </Teleport>
         </ClientOnly>
 
diff --git a/resources/js/theme/global-pt.js b/resources/js/theme/global-pt.js
index ccae85a4..ff4f0b09 100644
--- a/resources/js/theme/global-pt.js
+++ b/resources/js/theme/global-pt.js
@@ -3,6 +3,14 @@
  * https://primevue.org/passthrough/#global
  */
 export default {
+    dialog: {
+        root: {
+            class: 'm-4 sm:m-0'
+        },
+        mask: {
+            class: 'backdrop-blur-xs'
+        },
+    },
     toast: {
         root: {
             // Full width/centered on mobile, bottom right desktop

From f62a978460db062ba68d3e3154fd965eb8c1d8ee Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sun, 15 Jun 2025 19:36:27 +0000
Subject: [PATCH 2/2] fix: eslint complaint

---
 resources/js/layouts/app/HeaderLayout.vue  | 8 +++-----
 resources/js/layouts/app/SidebarLayout.vue | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/resources/js/layouts/app/HeaderLayout.vue b/resources/js/layouts/app/HeaderLayout.vue
index a777d376..b603ea4b 100644
--- a/resources/js/layouts/app/HeaderLayout.vue
+++ b/resources/js/layouts/app/HeaderLayout.vue
@@ -76,11 +76,9 @@ const toggleMobileUserMenu = (event) => {
                         </div>
                     </template>
                 </Drawer>
-                <ScrollTop :buttonProps="{
-                    class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!',
-                    rounded: true,
-                    raised: true,
-                }" />
+                <ScrollTop
+                    :buttonProps="{ class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!', rounded: true, raised: true }"
+                />
             </Teleport>
         </ClientOnly>
         <div class="min-h-screen">
diff --git a/resources/js/layouts/app/SidebarLayout.vue b/resources/js/layouts/app/SidebarLayout.vue
index 89defcc4..e0a65c77 100644
--- a/resources/js/layouts/app/SidebarLayout.vue
+++ b/resources/js/layouts/app/SidebarLayout.vue
@@ -74,11 +74,9 @@ const toggleMobileUserMenu = (event) => {
                         </div>
                     </template>
                 </Drawer>
-                <ScrollTop :buttonProps="{
-                    class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!',
-                    rounded: true,
-                    raised: true,
-                }" />
+                <ScrollTop
+                    :buttonProps="{ class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!', rounded: true, raised: true }"
+                />
             </Teleport>
         </ClientOnly>