From 10b1ec8093ceac9f8ca2ff6e06a94c5a9b4648d3 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Fri, 26 Jun 2026 10:52:41 +0200
Subject: [PATCH] add scrollbar to content & fix header / footer into panel

---
 .../activity-filters/ActivityFilters.css      |  53 ++++---
 .../activity-filters/ActivityFilters.vue      | 142 +++++++++---------
 2 files changed, 101 insertions(+), 94 deletions(-)

diff --git a/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.css b/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.css
index f5c2470a0..bd3ed1716 100644
--- a/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.css
+++ b/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.css
@@ -28,8 +28,9 @@
   .activity-filters__panel {
     position: absolute;
     top: calc(100% + 6px);
-    right: 3px;
+    right: 0px;
     z-index: 100;
+    height: 70vh;
     width: 320px;
     background: var(--color-white);
     border-radius: 6px;
@@ -43,32 +44,36 @@
       border-bottom: 1px solid var(--color-silver-light, #f0f0f0);
     }
 
-    /* Sections */
-    .activity-filters__section {
-      padding: 12px;
-      .activity-filters__title {
-        font-size: 11px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-        margin-bottom: 3px;
-      }
-      .activity-filters__row {
-        padding: 2px 0;
-        font-size: 12px;
-        cursor: pointer;
-        user-select: none;
+    .activity-filters__content {
+      height: calc(100% - 41px - 57px);
+      overflow: auto;
+      /* Sections */
+      .activity-filters__section {
+        padding: 12px;
+        .activity-filters__title {
+          font-size: 11px;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          margin-bottom: 3px;
+        }
+        .activity-filters__row {
+          padding: 2px 0;
+          font-size: 12px;
+          cursor: pointer;
+          user-select: none;
 
-        &.is-disabled {
-          opacity: 0.4;
-          cursor: default;
+          &.is-disabled {
+            opacity: 0.4;
+            cursor: default;
+          }
         }
       }
-    }
-    .activity-filters__date-range {
-      :deep() .not-empty {
-        label {
-          display: none
+      .activity-filters__date-range {
+        :deep() .not-empty {
+          label {
+            display: none
+          }
         }
       }
     }
diff --git a/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.vue b/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.vue
index 19f5f7cdc..4de114dc7 100644
--- a/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.vue
+++ b/src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.vue
@@ -22,80 +22,82 @@
           <span>{{ $t("ProjectOverview.activity.filters.title") }}</span>
         </div>
 
-        <!-- Types -->
-        <div class="activity-filters__section">
-          <div class="activity-filters__title">
-            {{ $t("ProjectOverview.activity.filters.types") }}
+        <div class="activity-filters__content">
+          <!-- Types -->
+          <div class="activity-filters__section">
+            <div class="activity-filters__title">
+              {{ $t("ProjectOverview.activity.filters.types") }}
+            </div>
+            <div class="activity-filters__types">
+              <label
+                v-for="type in availableTypes"
+                :key="type.action"
+                class="activity-filters__row flex"
+                :class="{
+                  'is-checked': localFilters.types.includes(type.action),
+                  'is-disabled': type.disabled,
+                }"
+                @click="!type.disabled && toggleItem(localFilters.types, type.action)"
+              >
+                <BIMDataCheckbox
+                  :modelValue="localFilters.types.includes(type.action)"
+                  :disabled="type.disabled"
+                  @update:modelValue="!type.disabled && toggleItem(localFilters.types, type.action)"
+                  margin="0 6px 0 0"
+                  @click.stop
+                />
+                <span>{{ $t(type.badgeKey) }}</span>
+              </label>
+            </div>
           </div>
-          <div class="activity-filters__types">
-            <label
-              v-for="type in availableTypes"
-              :key="type.action"
-              class="activity-filters__row flex"
-              :class="{
-                'is-checked': localFilters.types.includes(type.action),
-                'is-disabled': type.disabled,
-              }"
-              @click="!type.disabled && toggleItem(localFilters.types, type.action)"
-            >
-              <BIMDataCheckbox
-                :modelValue="localFilters.types.includes(type.action)"
-                :disabled="type.disabled"
-                @update:modelValue="!type.disabled && toggleItem(localFilters.types, type.action)"
-                margin="0 6px 0 0"
-                @click.stop
-              />
-              <span>{{ $t(type.badgeKey) }}</span>
-            </label>
-          </div>
-        </div>
 
-        <!-- Users -->
-        <div class="activity-filters__section">
-          <div class="activity-filters__title">
-            {{ $t("ProjectOverview.activity.filters.users") }}
-          </div>
-          <div class="activity-filters__users">
-            <label
-              v-for="user in availableUsers"
-              :key="user"
-              class="activity-filters__row flex"
-              @click="toggleItem(localFilters.users, user)"
-            >
-              <BIMDataCheckbox
-                :modelValue="localFilters.users.includes(user)"
-                @update:modelValue="toggleItem(localFilters.users, user)"
-                margin="0 6px 0 0"
-                @click.stop
-              />
-              <span>{{ user }}</span>
-            </label>
+          <!-- Users -->
+          <div class="activity-filters__section">
+            <div class="activity-filters__title">
+              {{ $t("ProjectOverview.activity.filters.users") }}
+            </div>
+            <div class="activity-filters__users">
+              <label
+                v-for="user in availableUsers"
+                :key="user"
+                class="activity-filters__row flex"
+                @click="toggleItem(localFilters.users, user)"
+              >
+                <BIMDataCheckbox
+                  :modelValue="localFilters.users.includes(user)"
+                  @update:modelValue="toggleItem(localFilters.users, user)"
+                  margin="0 6px 0 0"
+                  @click.stop
+                />
+                <span>{{ user }}</span>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <!-- Date -->
-        <div class="activity-filters__section">
-          <div class="activity-filters__title">
-            {{ $t("ProjectOverview.activity.filters.period") }}
-          </div>
-          <div class="activity-filters__date-range">
-            <BIMDataDatePicker
-              :placeholder="$t('ProjectOverview.activity.filters.period')"
-              :isDateRange="true"
-              :autoCloseRange="true"
-              :clearButton="true"
-              :modelValue="localFilters.dateFrom"
-              :toDate="localFilters.dateTo"
-              :language="locale"
-              fixedPosition="bottom-left"
-              width="100%"
-              @update:modelValue="localFilters.dateFrom = $event"
-              @to-date-change="localFilters.dateTo = $event"
-              @cleared="
-                localFilters.dateFrom = null;
-                localFilters.dateTo = null;
-              "
-            />
+          <!-- Date -->
+          <div class="activity-filters__section">
+            <div class="activity-filters__title">
+              {{ $t("ProjectOverview.activity.filters.period") }}
+            </div>
+            <div class="activity-filters__date-range">
+              <BIMDataDatePicker
+                :placeholder="$t('ProjectOverview.activity.filters.period')"
+                :isDateRange="true"
+                :autoCloseRange="true"
+                :clearButton="true"
+                :modelValue="localFilters.dateFrom"
+                :toDate="localFilters.dateTo"
+                :language="locale"
+                fixedPosition="bottom-left"
+                width="100%"
+                @update:modelValue="localFilters.dateFrom = $event"
+                @to-date-change="localFilters.dateTo = $event"
+                @cleared="
+                  localFilters.dateFrom = null;
+                  localFilters.dateTo = null;
+                "
+              />
+            </div>
           </div>
         </div>