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] 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