add scroll down button

apps/frontend/src/layouts/LayoutWithTabs.vue

@@ -16,6 +16,7 @@
       <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
         <div ref="isTopOfContentRef" />
         <slot name="default" v-bind:scrollToBottom />
+
         <div ref="isBottomOfContentRef" />
       </div>
     </div>
@@ -26,6 +27,17 @@
       :class="{ 'opacity-100': !isBottomOfContentVisible }"
     />
 
+    <!-- Scroll to bottom -->
+    <Button
+      icon="pi pi-arrow-down"
+      rounded
+      variant="outlined"
+      severity="secondary"
+      class="transition-opacity opacity-0 row-start-3 row-span-1 col-start-1 sm:row-start-4 relative self-end mb-4 bg-red-900 place-self-center"
+      @click="scrollToBottom"
+      :class="{ 'opacity-100': !isBottomOfContentVisible }"
+    />
+
     <!-- Footer Section -->
     <div class="row-start-4 row-span-1 col-start-1 sm:row-start-5">
       <slot name="footer">
@@ -75,7 +87,10 @@ isBottomOfContentVisible.value = true
 
 const scrollToBottom = () => {
   if (contentScrollContainerRef.value) {
-    contentScrollContainerRef.value.scrollTop = contentScrollContainerRef.value.scrollHeight
+    contentScrollContainerRef.value.scrollTo({
+      top: contentScrollContainerRef.value.scrollHeight,
+      behavior: 'smooth',
+    })
   }
 }