diff --git a/packages/frontend-2/components/viewer/filters/Panel.vue b/packages/frontend-2/components/viewer/filters/Panel.vue
index 8fc941a0c..f88b100aa 100644
--- a/packages/frontend-2/components/viewer/filters/Panel.vue
+++ b/packages/frontend-2/components/viewer/filters/Panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <ViewerLayoutSidePanel disable-scrollbar>
+  <ViewerLayoutSidePanel max-height-class="max-h-[calc(100dvh-5rem)]" disable-scrollbar>
     <template #title>Filters</template>
     <template #actions>
       <div class="flex gap-x-0.5 items-center">
diff --git a/packages/frontend-2/components/viewer/layout/SidePanel.vue b/packages/frontend-2/components/viewer/layout/SidePanel.vue
index bfdbf6cc1..7be2c3a30 100644
--- a/packages/frontend-2/components/viewer/layout/SidePanel.vue
+++ b/packages/frontend-2/components/viewer/layout/SidePanel.vue
@@ -1,8 +1,9 @@
 <template>
   <div
     :class="[
-      'flex flex-col h-full max-h-[calc(100dvh-5rem)]',
-      disableScrollbar ? '' : 'overflow-hidden'
+      'flex flex-col h-full',
+      disableScrollbar ? '' : 'overflow-hidden',
+      maxHeightClass ? maxHeightClass : 'max-h-[calc(100dvh-3rem)]'
     ]"
   >
     <div
@@ -31,5 +32,6 @@
 defineProps<{
   title?: string
   disableScrollbar?: boolean
+  maxHeightClass?: string
 }>()
 </script>