From 4d2f0bec2d62a3adfffbaf92d387dde2eca01485 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Thu, 13 Jun 2024 12:48:14 +0100
Subject: [PATCH] feat: Allow to center Links items on display - MEED-7064 -
 Meeds-io/meeds#2150 (#3890)

This change allows to center Links when the layout specifies a fixed
height for application container.
---
 .../vue-apps/links/components/LinksApp.vue    |  2 +-
 .../links/components/view/LinksList.vue       | 35 ++++++++++---------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue b/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue
index 14f6cc6fff3..565cb8a4a5c 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue
@@ -26,7 +26,7 @@
         min-width="100%"
         max-width="100%"
         min-height="72"
-        class="d-flex flex-column align-center border-box-sizing justify-center pa-5 overflow-hidden position-relative card-border-radius app-background-color"
+        class="d-flex flex-column align-center border-box-sizing pa-5 overflow-hidden position-relative card-border-radius app-background-color"
         flat>
         <links-header
           v-if="$root.initialized"
diff --git a/webapp/portlet/src/main/webapp/vue-apps/links/components/view/LinksList.vue b/webapp/portlet/src/main/webapp/vue-apps/links/components/view/LinksList.vue
index 3f079df2ef6..bde2946618b 100644
--- a/webapp/portlet/src/main/webapp/vue-apps/links/components/view/LinksList.vue
+++ b/webapp/portlet/src/main/webapp/vue-apps/links/components/view/LinksList.vue
@@ -19,23 +19,26 @@
 
 -->
 <template>
-  <component
-    v-if="links?.length"
-    :is="isColumn && 'v-list' || 'card-carousel'"
-    :class="isColumn && 'pa-0' || 'mt-n2 mb-n4'"
-    v-bind="isColumn && {
-      dense: !largeIcon
-    }">
+  <div :class="!isColumn && 'my-auto'">
     <component
-      v-for="link in links"
-      :key="link.id"
-      :is="componentName"
-      :link="link"
-      :type="type"
-      :large-icon="largeIcon"
-      :show-name="showName"
-      :show-description="showDescription" />
-  </component>
+      v-if="links?.length"
+      :is="isColumn && 'v-list' || 'card-carousel'"
+      :class="isColumn && 'pa-0' || 'mt-n2 mb-n4'"
+      class="full-width"
+      v-bind="isColumn && {
+        dense: !largeIcon
+      }">
+      <component
+        v-for="link in links"
+        :key="link.id"
+        :is="componentName"
+        :link="link"
+        :type="type"
+        :large-icon="largeIcon"
+        :show-name="showName"
+        :show-description="showDescription" />
+    </component>
+  </div>
 </template>
 <script>
 export default {