diff --git a/web/static/css/style.css b/web/static/css/style.css
index 7fe9ddd..4d97295 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -823,6 +823,26 @@ label {
         padding: 0 1rem;
     }
 
+    /* Keep the Summary date filters usable on narrow screens. */
+    .summary-form {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch !important;
+    }
+
+    .summary-form > .flex-col {
+        width: 100%;
+    }
+
+    .summary-form input[type="date"] {
+        box-sizing: border-box;
+        min-width: 0;
+    }
+
+    .summary-form > .flex-col[style*="margin-left"] {
+        margin-left: 0 !important;
+    }
+
     h1 {
         font-size: 1.75rem;
     }
@@ -1536,4 +1556,3 @@ html.dark-mode .settings-toggle:hover {
     text-align: center;
     color: var(--text-muted);
 }
-
diff --git a/web/templates/summary.html b/web/templates/summary.html
index d3edc6a..b08e3d9 100644
--- a/web/templates/summary.html
+++ b/web/templates/summary.html
@@ -11,7 +11,7 @@ <h1>
             </h1>
             <p class="mb-0">{{ .Report.DateRange }}</p>
         </div>
-        <form action="/summary" method="GET"
+        <form action="/summary" method="GET" class="summary-form"
             style="display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap;">
             <div class="flex-col">
                 <label for="start" class="text-xs mb-0" style="margin-bottom: 0.25rem; font-weight: 600;">Start</label>
@@ -303,4 +303,4 @@ <h3 class="mb-md">Peak Productivity Hours</h3>
         });
     });
 </script>
-{{ end }}
\ No newline at end of file
+{{ end }}