Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-09 20:45:00 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: keep documents filter bar on a single line on desktop

Browse Source 
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
This commit is contained in:
ephraimduncan
2026-07-06 22:17:09 +00:00
parent 50f272be87
commit a7f6fb8d7e
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/remix/app/components/tables/documents-table-sender-filter.tsx
+3 -1
View File
@@ -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}
apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx
+5 -5
View File
@@ -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>