From a7f6fb8d7e525ced7e1697566985bd9ada08711a Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Mon, 6 Jul 2026 22:17:09 +0000
Subject: [PATCH] fix: keep documents filter bar on a single line on desktop

Prevent the documents page filter bar (status tabs, sender filter, period selector, search) from
wrapping onto multiple lines or scrolling horizontally at desktop widths.

- Force a single row at the xl breakpoint where the full filter set fits within the container
- Narrow the sender filter (200px -> 160px) and period selector (192px -> 160px)
- Stretch the search input to fill the remaining row width, flush with the content edge
- Keep the existing wrapping behaviour below xl for smaller viewports
- Add a className passthrough to DocumentsTableSenderFilter for the width override
---
 .../tables/documents-table-sender-filter.tsx           |  4 +++-
 .../_authenticated+/t.$teamUrl+/documents._index.tsx   | 10 +++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/remix/app/components/tables/documents-table-sender-filter.tsx b/apps/remix/app/components/tables/documents-table-sender-filter.tsx
index c4c2bbd4a..b722c1f7f 100644
--- a/apps/remix/app/components/tables/documents-table-sender-filter.tsx
+++ b/apps/remix/app/components/tables/documents-table-sender-filter.tsx
@@ -7,9 +7,10 @@ import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
 type DocumentsTableSenderFilterProps = {
   teamId: number;
+  className?: string;
 };
 
-export const DocumentsTableSenderFilter = ({ teamId }: DocumentsTableSenderFilterProps) => {
+export const DocumentsTableSenderFilter = ({ teamId, className }: DocumentsTableSenderFilterProps) => {
   const { pathname } = useLocation();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -52,6 +53,7 @@ export const DocumentsTableSenderFilter = ({ teamId }: DocumentsTableSenderFilte
           </Trans>
         </p>
       }
+      className={className}
       enableClearAllButton={true}
       inputPlaceholder={msg`Search`}
       loading={!isMounted || isLoading}
diff --git a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx
index 854283075..525e643f8 100644
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx
@@ -148,8 +148,8 @@ export default function DocumentsPage() {
             </h2>
           </div>
 
-          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1 xl:grow xl:flex-nowrap">
+            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto xl:shrink-0">
               <TabsList>
                 {[
                   ExtendedDocumentStatus.INBOX,
@@ -182,12 +182,12 @@ export default function DocumentsPage() {
               </TabsList>
             </Tabs>
 
-            {team && <DocumentsTableSenderFilter teamId={team.id} />}
+            {team && <DocumentsTableSenderFilter teamId={team.id} className="w-[160px]" />}
 
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <div className="flex w-40 flex-shrink-0 flex-wrap items-center justify-between gap-x-2 gap-y-4">
               <PeriodSelector />
             </div>
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <div className="flex w-40 flex-shrink-0 flex-wrap items-center justify-between gap-x-2 gap-y-4 xl:w-auto xl:grow">
               <DocumentSearch initialValue={findDocumentSearchParams.query} />
             </div>
           </div>