From bb278aac35a38046f1dced3ca1c28e84d86db669 Mon Sep 17 00:00:00 2001
From: Brian Choromanski <BrianChoromanski@gmail.com>
Date: Fri, 3 Apr 2026 00:11:16 -0400
Subject: [PATCH] feat: Added scroll to top on all pages that have
 recipeCardSection (#7384)

---
 .../Domain/Recipe/RecipeCardSection.vue       |  1 +
 .../Layout/LayoutParts/AppScrollToTop.vue     | 38 +++++++++++++++++++
 frontend/lib/icons/icons.ts                   |  2 +
 3 files changed, 41 insertions(+)
 create mode 100644 frontend/components/Layout/LayoutParts/AppScrollToTop.vue

diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index 4321c6d2e..5600e5853 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -167,6 +167,7 @@
         :loading="loading"
       />
     </v-fade-transition>
+    <AppScrollToTop />
   </div>
 </template>
 
diff --git a/frontend/components/Layout/LayoutParts/AppScrollToTop.vue b/frontend/components/Layout/LayoutParts/AppScrollToTop.vue
new file mode 100644
index 000000000..eaddd2627
--- /dev/null
+++ b/frontend/components/Layout/LayoutParts/AppScrollToTop.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-fade-transition>
+    <v-btn
+      v-if="showButton"
+      icon
+      position="fixed"
+      location="bottom right"
+      class="ma-4"
+      color="primary"
+      elevation="4"
+      style="z-index: 999;"
+      @click="scrollToTop"
+    >
+      <v-icon>{{ $globals.icons.arrowUp }}</v-icon>
+    </v-btn>
+  </v-fade-transition>
+</template>
+
+<script setup lang="ts">
+const showButton = ref(false);
+const threshold = 400;
+
+function onScroll() {
+  showButton.value = document.documentElement.scrollTop > threshold;
+}
+
+function scrollToTop() {
+  document.documentElement.scrollTop = 0;
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", onScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScroll);
+});
+</script>
diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index f4482bc3d..261ab30f2 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -11,6 +11,7 @@ import {
   mdiArrowLeftBoldOutline,
   mdiArrowRightBold,
   mdiArrowRightBoldOutline,
+  mdiArrowUp,
   mdiBackupRestore,
   mdiBeakerOutline,
   mdiBellAlert,
@@ -177,6 +178,7 @@ export const icons = {
   api: mdiApi,
   arrowLeftBold: mdiArrowLeftBold,
   arrowRightBold: mdiArrowRightBold,
+  arrowUp: mdiArrowUp,
   arrowUpDown: mdiDrag,
   backupRestore: mdiBackupRestore,
   bellAlert: mdiBellAlert,