From 7c6563deda49fc0b8ccffcba6aae155be2e569be Mon Sep 17 00:00:00 2001
From: Nicholas Ward <nicholaspward@outlook.com>
Date: Tue, 18 Aug 2026 14:11:03 -0500
Subject: [PATCH] fix(filter): eliminate overflow scroll for filter popout on
 smaller screens

---
 src/styles/components/entity-directory.css |  9 ++++-
 src/styles/responsive.css                  | 39 ++++++++--------------
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/styles/components/entity-directory.css b/src/styles/components/entity-directory.css
index 8167bc2..5558cc1 100644
--- a/src/styles/components/entity-directory.css
+++ b/src/styles/components/entity-directory.css
@@ -363,6 +363,10 @@ input[type="search"]::-webkit-search-results-decoration,
   top: calc(100% + 6px);
   right: 0;
   width: 280px;
+  max-width: min(280px, calc(100vw - 32px));
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  box-sizing: border-box;
   background: #ffffff;
   border: 1px solid #edf0f5;
   border-radius: 6px;
@@ -617,7 +621,10 @@ input[type="search"]::-webkit-search-results-decoration,
   top: calc(100% + 6px);
   left: 0;
   min-width: 260px;
-  max-width: 340px;
+  max-width: min(340px, calc(100vw - 32px));
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  box-sizing: border-box;
   background: #ffffff;
   border: 1px solid #edf0f5;
   border-radius: 6px;
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
index 67f71b1..3451a5b 100644
--- a/src/styles/responsive.css
+++ b/src/styles/responsive.css
@@ -528,17 +528,12 @@
   .application-body .workspace-pills {
     display: flex !important;
     align-items: center !important;
-    flex-wrap: nowrap !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch !important;
-    scrollbar-width: none !important;
+    flex-wrap: wrap !important;
+    overflow: visible !important;
     gap: 8px !important;
     padding: 0 0 16px !important;
     margin: 0 !important;
   }
-  .application-body .workspace-pills::-webkit-scrollbar {
-    display: none !important;
-  }
   .application-body .workspace-pills > a {
     min-height: 36px !important;
     padding: 6px 14px 6px 10px !important;
@@ -546,28 +541,20 @@
     flex: 0 0 auto !important;
     white-space: nowrap !important;
   }
-  .application-body .workspace-pills .filter-menu {
-    flex: 0 0 auto !important;
-    margin-left: 0 !important;
-  }
-  .application-body .workspace-pills .filter-menu summary {
-    display: inline-flex !important;
-    align-items: center !important;
-    gap: 6px !important;
+  .application-body .workspace-filter-btn {
     min-height: 36px !important;
-    padding: 6px 14px !important;
-    color: #050841 !important;
-    background: #fff !important;
-    border: 1px solid #ececec !important;
-    border-radius: 999px !important;
+    padding: 6px 12px !important;
     font-size: 14px !important;
-    white-space: nowrap !important;
-    cursor: pointer !important;
   }
-  .application-body .workspace-pills .filter-menu[open] summary {
-    background: #eaf1fe !important;
-    border-color: #3d5df6 !important;
-    color: #3d5df6 !important;
+  .application-body .workspace-filter-menu-popover {
+    max-width: calc(100vw - 32px) !important;
+    max-height: calc(100vh - 120px) !important;
+    overflow-y: auto !important;
+  }
+  .application-body .filter-chip-popover {
+    max-width: calc(100vw - 32px) !important;
+    max-height: calc(100vh - 120px) !important;
+    overflow-y: auto !important;
   }
 
   /* Directory Table Mobile Enhancements */