diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d22c866..cfc3c8c 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -6545,12 +6545,18 @@ dialog.modal::backdrop {
 
 /* Each filter is a label-above-control cell so the caption sits on top of
    its select / button. The whole filter-row stays a horizontal flex-wrap
-   of these column-cells (t-paliad-117). */
+   of these column-cells (t-paliad-117).
+
+   min-width: 0 + max-width: 100% lets the cell shrink to fit its flex
+   container and prevents a native <select> with long option text from
+   blowing the cell wider than the viewport (t-paliad-255). */
 .filter-group {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 0.25rem;
+    min-width: 0;
+    max-width: 100%;
 }
 
 .filter-label {
@@ -6564,6 +6570,10 @@ dialog.modal::backdrop {
     .filter-group .entity-select { width: 100%; }
 }
 
+/* max-width: 100% caps the intrinsic width of a native <select> at its
+   parent — without it, browsers size the select to the longest <option>
+   text and a very long project title overflows the viewport on tablet
+   widths above the 480px breakpoint (t-paliad-255). */
 .entity-select {
     padding: 0.4rem 0.75rem;
     font-size: 0.85rem;
@@ -6572,6 +6582,8 @@ dialog.modal::backdrop {
     background: var(--color-surface);
     color: var(--color-text);
     cursor: pointer;
+    max-width: 100%;
+    min-width: 0;
 }
 
 .entity-select:focus {