Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 16:23:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #304 from G3root/fix-overscroll

Browse Source 
fix: tab overflow on smaller viewport and tab scroll ux
This commit is contained in:
Lucas Smith
2023-08-29 13:26:26 +10:00
committed by GitHub
parent ba054ae915 18faaf49d9
commit 04f6df6839
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/src/app/(dashboard)/documents/page.tsx
View File

@ -71,10 +71,13 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
<h1 className="mt-12 text-4xl font-semibold">Documents</h1> <h1 className="mt-12 text-4xl font-semibold">Documents</h1>
<div className="mt-8 flex flex-wrap gap-x-4 gap-y-6 "> <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6 ">
<Tabs defaultValue={shouldDefaultToPending ? InternalDocumentStatus.PENDING : status}> <Tabs
className="overflow-x-auto"
defaultValue={shouldDefaultToPending ? InternalDocumentStatus.PENDING : status}
>
<TabsList> <TabsList>
<TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild> <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
<Link href={getTabHref(InternalDocumentStatus.PENDING)}> <Link href={getTabHref(InternalDocumentStatus.PENDING)} scroll={false}>
<DocumentStatus status={InternalDocumentStatus.PENDING} /> <DocumentStatus status={InternalDocumentStatus.PENDING} />
<span className="ml-1 hidden opacity-50 md:inline-block"> <span className="ml-1 hidden opacity-50 md:inline-block">
@ -84,7 +87,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
</TabsTrigger> </TabsTrigger>
<TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild> <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild>
<Link href={getTabHref(InternalDocumentStatus.COMPLETED)}> <Link href={getTabHref(InternalDocumentStatus.COMPLETED)} scroll={false}>
<DocumentStatus status={InternalDocumentStatus.COMPLETED} /> <DocumentStatus status={InternalDocumentStatus.COMPLETED} />
<span className="ml-1 hidden opacity-50 md:inline-block"> <span className="ml-1 hidden opacity-50 md:inline-block">
@ -94,7 +97,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
</TabsTrigger> </TabsTrigger>
<TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild> <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
<Link href={getTabHref(InternalDocumentStatus.DRAFT)}> <Link href={getTabHref(InternalDocumentStatus.DRAFT)} scroll={false}>
<DocumentStatus status={InternalDocumentStatus.DRAFT} /> <DocumentStatus status={InternalDocumentStatus.DRAFT} />
<span className="ml-1 hidden opacity-50 md:inline-block"> <span className="ml-1 hidden opacity-50 md:inline-block">
@ -104,7 +107,9 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
</TabsTrigger> </TabsTrigger>
<TabsTrigger className="min-w-[60px]" value="ALL" asChild> <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
<Link href={getTabHref('ALL')}>All</Link> <Link href={getTabHref('ALL')} scroll={false}>
All
</Link>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</Tabs> </Tabs>

2
apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
View File

@ -39,7 +39,7 @@ export const PeriodSelector = () => {
params.delete('period'); params.delete('period');
} }
router.push(`${pathname}?${params.toString()}`); router.push(`${pathname}?${params.toString()}`, { scroll: false });
}; };
return ( return (