nicholas/formulation
1
0
Fork 0
Code Pull Requests Actions Activity

fix(filter): eliminate overflow scroll for filter popout on smaller screens

Browse Source
This commit is contained in:
nicholas
2026-08-18 14:11:03 -05:00
parent 5dbdf1edde
commit 7c6563deda
2 changed files with 21 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/entity-directory.css
+8 -1
View File
@@ -363,6 +363,10 @@ input[type="search"]::-webkit-search-results-decoration,
top: calc(100% + 6px); top: calc(100% + 6px);
right: 0; right: 0;
width: 280px; width: 280px;
max-width: min(280px, calc(100vw - 32px));
max-height: calc(100vh - 120px);
overflow-y: auto;
box-sizing: border-box;
background: #ffffff; background: #ffffff;
border: 1px solid #edf0f5; border: 1px solid #edf0f5;
border-radius: 6px; border-radius: 6px;
@@ -617,7 +621,10 @@ input[type="search"]::-webkit-search-results-decoration,
top: calc(100% + 6px); top: calc(100% + 6px);
left: 0; left: 0;
min-width: 260px; 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; background: #ffffff;
border: 1px solid #edf0f5; border: 1px solid #edf0f5;
border-radius: 6px; border-radius: 6px;
src/styles/responsive.css
+13 -26
View File
@@ -528,17 +528,12 @@
.application-body .workspace-pills { .application-body .workspace-pills {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
flex-wrap: nowrap !important; flex-wrap: wrap !important;
overflow-x: auto !important; overflow: visible !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 8px !important; gap: 8px !important;
padding: 0 0 16px !important; padding: 0 0 16px !important;
margin: 0 !important; margin: 0 !important;
} }
.application-body .workspace-pills::-webkit-scrollbar {
display: none !important;
}
.application-body .workspace-pills > a { .application-body .workspace-pills > a {
min-height: 36px !important; min-height: 36px !important;
padding: 6px 14px 6px 10px !important; padding: 6px 14px 6px 10px !important;
@@ -546,28 +541,20 @@
flex: 0 0 auto !important; flex: 0 0 auto !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
.application-body .workspace-pills .filter-menu { .application-body .workspace-filter-btn {
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;
min-height: 36px !important; min-height: 36px !important;
padding: 6px 14px !important; padding: 6px 12px !important;
color: #050841 !important;
background: #fff !important;
border: 1px solid #ececec !important;
border-radius: 999px !important;
font-size: 14px !important; font-size: 14px !important;
white-space: nowrap !important;
cursor: pointer !important;
} }
.application-body .workspace-pills .filter-menu[open] summary { .application-body .workspace-filter-menu-popover {
background: #eaf1fe !important; max-width: calc(100vw - 32px) !important;
border-color: #3d5df6 !important; max-height: calc(100vh - 120px) !important;
color: #3d5df6 !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 */ /* Directory Table Mobile Enhancements */