From 1a06d192723aca740e6210854e3b6d4d0d4719c2 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 15 Sep 2025 18:43:41 -0400
Subject: [PATCH 1/2] FOUR-26546:Arrows are not displayed in the carousel when
 Process information is opened

---
 .../components/CarouselSlide.vue              | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/resources/js/processes-catalogue/components/CarouselSlide.vue b/resources/js/processes-catalogue/components/CarouselSlide.vue
index 931c36a7d4..a167b1dcfd 100644
--- a/resources/js/processes-catalogue/components/CarouselSlide.vue
+++ b/resources/js/processes-catalogue/components/CarouselSlide.vue
@@ -3,8 +3,23 @@
     <b-carousel
       ref="carousel"
       :interval="0"
-      controls
     >
+      <div class="tw-flex tw-content-stretch tw-absolute tw-w-full tw-z-10 tw-top-1/2 tw-flex-wrap">
+        <button
+          class="tw-content-center tw-grow tw-left-0 tw-absolute tw-bg-transparent tw-color-[#556271] tw-text-xl"
+          aria-hidden="false"
+          @click="prevSlide()"
+        >
+          <i class="fas fa-caret-left" />
+        </button>
+        <button
+          class="tw-content-center tw-grow tw-right-0 tw-absolute tw-bg-transparent tw-color-[#556271] tw-text-xl"
+          aria-hidden="false"
+          @click="nextSlide()"
+        >
+          <i class="fas fa-caret-right" />
+        </button>
+      </div>
       <b-carousel-slide
         v-for="(image, index) in images.length > 0 ? images : defaultImage"
         :key="index"
@@ -68,6 +83,12 @@ export default {
     );
   },
   methods: {
+    prevSlide() {
+      this.$refs.carousel.prev();
+    },
+    nextSlide() {
+      this.$refs.carousel.next();
+    },
     resizeCarousel(url, index) {
       this.fullPage = !this.fullPage;
       this.$emit("full-carousel", {

From d6a971427bf9dd1053963d720a0849a7130273f9 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 15 Sep 2025 19:01:42 -0400
Subject: [PATCH 2/2] hover behavior

---
 .../processes-catalogue/components/CarouselSlide.vue  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/js/processes-catalogue/components/CarouselSlide.vue b/resources/js/processes-catalogue/components/CarouselSlide.vue
index a167b1dcfd..123b8553a3 100644
--- a/resources/js/processes-catalogue/components/CarouselSlide.vue
+++ b/resources/js/processes-catalogue/components/CarouselSlide.vue
@@ -3,18 +3,17 @@
     <b-carousel
       ref="carousel"
       :interval="0"
+      class="carousel"
     >
-      <div class="tw-flex tw-content-stretch tw-absolute tw-w-full tw-z-10 tw-top-1/2 tw-flex-wrap">
+      <div class="controls tw-flex tw-content-stretch tw-absolute tw-w-full tw-z-10 tw-top-1/2 tw-flex-wrap">
         <button
           class="tw-content-center tw-grow tw-left-0 tw-absolute tw-bg-transparent tw-color-[#556271] tw-text-xl"
-          aria-hidden="false"
           @click="prevSlide()"
         >
           <i class="fas fa-caret-left" />
         </button>
         <button
           class="tw-content-center tw-grow tw-right-0 tw-absolute tw-bg-transparent tw-color-[#556271] tw-text-xl"
-          aria-hidden="false"
           @click="nextSlide()"
         >
           <i class="fas fa-caret-right" />
@@ -101,6 +100,12 @@ export default {
 </script>
 
 <style scoped>
+.controls {
+  display: none;
+}
+.carousel:hover .controls {
+  display: block;
+}
 .carousel-normal {
   width: 100%;
   height: auto;