From 5a730a94fb7f4e9848254eb18efcd59e70d8c05b Mon Sep 17 00:00:00 2001
From: Anwar khanfir <akhanfir@exoplatform.com>
Date: Mon, 11 Nov 2024 13:08:43 +0100
Subject: [PATCH] fix: Breadcrumb on long page title isn't applied in
 Navigation portlet with Breadcrumb style - EXO-75273 - Meeds-io/meeds#2570.
 Before this change, when select any node in a space and add under it many
 items one under another with long titles and in the last added item, add a
 Breadcrumb navigation portlet, the labels in breadcrumb are not displayed
 correctly. To resolve this problem, change v-btn to v-card and use flex for
 alignment. After this change, Last page title is not centered if the last
 title is too long, a breadcrumb at the end is applied.

---
 .../breadcrumb/components/Breadcrumb.vue      | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/webapp/portlet/src/main/webapp/vue-apps/breadcrumb/components/Breadcrumb.vue b/webapp/portlet/src/main/webapp/vue-apps/breadcrumb/components/Breadcrumb.vue
index 6753b40fe52..89036007265 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/breadcrumb/components/Breadcrumb.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/breadcrumb/components/Breadcrumb.vue
@@ -3,47 +3,50 @@
     <div
       v-if="breadcrumbToDisplay.length"
       id="breadcrumbParent"
-      class="px-2 py-2 application-body d-flex">
+      class="px-2 application-body d-flex">
       <div
         v-for="(breadcrumb, index) in breadcrumbToDisplay"
         :key="index"
         :class="breadcrumbToDisplay.length === 1 && 'single-path-element' || ''"
-        class="text-truncate text-body-1">
+        class="text-truncate text-body-1 d-flex">
         <v-tooltip
           v-if="breadcrumb.label != ellipsis"
           max-width="300"
           bottom>
           <template #activator="{ on, attrs }">
             <div
-              class="text-truncate d-inline not-clickable"
+              class="text-truncate d-inline"
               v-bind="attrs"
               v-on="on">
-              <v-btn
+              <v-card
                 :href="breadcrumb.uri"
                 :target="breadcrumb.target === 'SAME_TAB' && '_self' || '_blank'"
                 :disabled="!breadcrumb.uri"
+                :class="!breadcrumb.uri && 'text-subtitle-color'"
+                height="52"
                 min-width="45px"
                 max-width="250px"
-                class="pa-0"
-                text>
+                class="pa-0 d-flex align-center"
+                flat>
                 <span class="text-truncate text-none">
                   {{ breadcrumb.label }}
                 </span>
-              </v-btn>
+              </v-card>
             </div>
           </template>
           <span class="caption">
             {{ breadcrumb.label }}
           </span>
         </v-tooltip>
-        <v-btn
+        <v-card
           v-else
           disabled
           min-width="45px"
-          class="pa-0 flex-shrink-1"
-          text>
+          height="52"
+          class="pa-0 text-subtitle-color d-flex align-center justify-center flex-shrink-1"
+          flat>
           {{ breadcrumb.label }}
-        </v-btn>
+        </v-card>
         <v-icon
           v-if="index < breadcrumbToDisplay.length-1"
           size="16"
@@ -108,4 +111,4 @@ export default {
     },
   }
 };
-</script>
+</script>
\ No newline at end of file