From 912cc0bb340d33696bac0538f956722db96ae563 Mon Sep 17 00:00:00 2001
From: Azmi Touil <atouil@exoplatform.com>
Date: Thu, 6 Aug 2026 11:44:05 +0200
Subject: [PATCH] fix: use a compact mobile-style display for the Content List
 on mobile or in a collapsed drawer - EXO-89044 - eXIP7.3.0.12

On a mobile viewport, or inside the category-click drawer while it's not
expanded, the item now shows a square illustration, hides the space name
and view/attachment counts, and collapses categories to a single "+N" badge
opening the categories drawer - expanding the drawer switches back to the
regular desktop display.
---
 .../components/ContentListItem.vue            | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/content-webapp/src/main/webapp/vue-app/content-list-view/components/ContentListItem.vue b/content-webapp/src/main/webapp/vue-app/content-list-view/components/ContentListItem.vue
index 9274fd776..8fcd5b452 100644
--- a/content-webapp/src/main/webapp/vue-app/content-list-view/components/ContentListItem.vue
+++ b/content-webapp/src/main/webapp/vue-app/content-list-view/components/ContentListItem.vue
@@ -20,7 +20,7 @@
 
 -->
 <template>
-  <div :class="compact ? 'py-2' : 'py-3'" class="contentListItem d-flex">
+  <div :class="isCompactDisplay ? 'py-2' : 'py-3'" class="contentListItem d-flex">
     <a
       :href="item.url"
       class="d-flex align-center justify-center flex-shrink-0 rounded me-4"
@@ -77,6 +77,7 @@
         <exo-space-avatar
           v-if="item.spaceId"
           :space-id="item.spaceId"
+          :avatar="isCompactDisplay"
           :size="20"
           small-font-size
           popover
@@ -94,7 +95,7 @@
       <p class="text-truncate-2 text-body mb-0">
         {{ item.summary }}
       </p>
-      <div v-if="item.viewsCount || item.attachmentsCount" class="d-flex align-center justify-end text-caption text-color mt-auto pt-1">
+      <div v-if="!isCompactDisplay && (item.viewsCount || item.attachmentsCount)" class="d-flex align-center justify-end text-caption text-color mt-auto pt-1">
         <template v-if="item.viewsCount">
           <v-icon size="14" class="me-1">fas fa-eye</v-icon>
           <span class="me-3">{{ item.viewsCount }}</span>
@@ -133,12 +134,21 @@ export default {
     },
   }),
   computed: {
+    isMobile() {
+      return this.$vuetify.breakpoint.mobile;
+    },
+    isCompactDisplay() {
+      return this.isMobile || (this.compact && !this.expanded);
+    },
     illustrationIconSize() {
+      if (this.isCompactDisplay) {
+        return 24;
+      }
       return !this.compact && 42 || this.expanded && 32 || 24;
     },
     illustrationStyle() {
-      const width = !this.compact && '150px' || this.expanded && '112px' || '64px';
-      const minHeight = !this.compact && '120px' || this.expanded && '90px' || '64px';
+      const width = this.isCompactDisplay ? '64px' : (!this.compact && '150px' || this.expanded && '112px' || '64px');
+      const minHeight = this.isCompactDisplay ? '64px' : (!this.compact && '120px' || this.expanded && '90px' || '64px');
       return {
         width,
         minHeight,
@@ -155,12 +165,18 @@ export default {
       return this.item.categoryIds?.join(',');
     },
     maxVisibleCategories() {
+      if (this.isCompactDisplay) {
+        return 0;
+      }
       return this.expanded ? 2 : 1;
     },
     filteredCategories() {
       return this.categories.slice(0, this.maxVisibleCategories);
     },
     remainingCount() {
+      if (this.isCompactDisplay) {
+        return this.categories.length;
+      }
       return this.categories.length - this.maxVisibleCategories;
     },
   },