Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-18 18:51:37 +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

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

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

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

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