From 7ae99d2038709b999e976231923721a25137595a Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Sat, 26 Aug 2023 07:22:51 +0530
Subject: [PATCH 1/2] fix: overflow and scroll ux

---
 apps/web/src/app/(dashboard)/documents/page.tsx | 17 +++++++++++------
 .../period-selector/period-selector.tsx         |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx
index 834483757..6c56db8d1 100644
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -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-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>
diff --git a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
index d56d90c7f..afabefc3f 100644
--- a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
+++ b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
@@ -39,7 +39,7 @@ export const PeriodSelector = () => {
       params.delete('period');
     }
 
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
   };
 
   return (

From 18faaf49d9a2253b28a2121ed822723aa32c91d8 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Sun, 27 Aug 2023 06:26:49 +0530
Subject: [PATCH 2/2] fix: style

---
 apps/web/src/app/(dashboard)/documents/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx
index 6c56db8d1..76675f573 100644
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -72,7 +72,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
 
       <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6 ">
         <Tabs
-          className="overflow-auto"
+          className="overflow-x-auto"
           defaultValue={shouldDefaultToPending ? InternalDocumentStatus.PENDING : status}
         >
           <TabsList>