fix:responsive scroll

ViniOkamoto · Jan 22, 2024 · 188867b · 188867b
1 parent cb626f7
commit 188867b
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 85 deletions.
diff --git a/app/(dashboard)/dashboard/profile/page.tsx b/app/(dashboard)/dashboard/profile/page.tsx
@@ -1,14 +1,15 @@
 import BreadCrumb from "@/components/breadcrumb";
 import { CreateProfileOne } from "@/components/forms/user-profile-stepper/create-profile";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 const breadcrumbItems = [{ title: "Profile", link: "/dashboard/profile" }];
 export default function page() {
   return (
-    <>
+    <ScrollArea className="h-full">
       <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
         <BreadCrumb items={breadcrumbItems} />
         <CreateProfileOne categories={[]} initialData={null} />
       </div>
-    </>
+    </ScrollArea>
   );
 }
diff --git a/app/(dashboard)/dashboard/user/[userId]/page.tsx b/app/(dashboard)/dashboard/user/[userId]/page.tsx
@@ -1,5 +1,6 @@
 import BreadCrumb from "@/components/breadcrumb";
 import { ProductForm } from "@/components/forms/product-form";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import React from "react";
 
 export default function Page() {
@@ -8,16 +9,18 @@ export default function Page() {
     { title: "Create", link: "/dashboard/user/create" },
   ];
   return (
-    <div className="flex-1 space-y-4 p-8">
-      <BreadCrumb items={breadcrumbItems} />
-      <ProductForm
-        categories={[
-          { _id: "shirts", name: "shirts" },
-          { _id: "pants", name: "pants" },
-        ]}
-        initialData={null}
-        key={null}
-      />
-    </div>
+    <ScrollArea className="h-full">
+      <div className="flex-1 space-y-4 p-5">
+        <BreadCrumb items={breadcrumbItems} />
+        <ProductForm
+          categories={[
+            { _id: "shirts", name: "shirts" },
+            { _id: "pants", name: "pants" },
+          ]}
+          initialData={null}
+          key={null}
+        />
+      </div>
+    </ScrollArea>
   );
 }
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
@@ -8,7 +8,7 @@ export default function Header() {
   return (
     <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
       <nav className="h-14 flex items-center justify-between px-4">
-        <div className="hidden md:block">
+        <div className="hidden lg:block">
           <Link
             href={"https://github.com/Kiranism/next-shadcn-dashboard-starter"}
             target="_blank"
@@ -27,7 +27,7 @@ export default function Header() {
             </svg>
           </Link>
         </div>
-        <div className={cn("block sm:!hidden")}>
+        <div className={cn("block lg:!hidden")}>
           <MobileSidebar />
         </div>
 

diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 export default function Sidebar() {
   return (
     <nav
-      className={cn(`relative hidden h-screen border-r pt-16 md:block w-72`)}
+      className={cn(`relative hidden h-screen border-r pt-16 lg:block w-72`)}
     >
       <div className="space-y-4 py-4">
         <div className="px-3 py-2">

diff --git a/components/tables/employee-tables/employee-table.tsx b/components/tables/employee-tables/employee-table.tsx
@@ -196,7 +196,7 @@ export function EmployeeTable<TData, TValue>({
         }
         className="w-full md:max-w-sm"
       />
-      <ScrollArea className="rounded-md border h-[50vh]">
+      <ScrollArea className="rounded-md border h-[calc(80vh-220px)]">
         <Table className="relative">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -249,78 +249,82 @@ export function EmployeeTable<TData, TValue>({
       </ScrollArea>
 
       <div className="flex flex-col gap-2 sm:flex-row items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
+        <div className="flex items-center justify-between w-full">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+            <div className="flex items-center space-x-2">
+              <p className="whitespace-nowrap text-sm font-medium">
+                Rows per page
+              </p>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value));
+                }}
+              >
+                <SelectTrigger className="h-8 w-[70px]">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {pageSizeOptions.map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
         </div>
-        <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center justify-between sm:justify-end gap-2 w-full">
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            Page {table.getState().pagination.pageIndex + 1} of{" "}
+            {table.getPageCount()}
+          </div>
           <div className="flex items-center space-x-2">
-            <p className="whitespace-nowrap text-sm font-medium">
-              Rows per page
-            </p>
-            <Select
-              value={`${table.getState().pagination.pageSize}`}
-              onValueChange={(value) => {
-                table.setPageSize(Number(value));
-              }}
+            <Button
+              aria-label="Go to first page"
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <DoubleArrowLeftIcon className="h-4 w-4" aria-hidden="true" />
+            </Button>
+            <Button
+              aria-label="Go to previous page"
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
             >
-              <SelectTrigger className="h-8 w-[70px]">
-                <SelectValue
-                  placeholder={table.getState().pagination.pageSize}
-                />
-              </SelectTrigger>
-              <SelectContent side="top">
-                {pageSizeOptions.map((pageSize) => (
-                  <SelectItem key={pageSize} value={`${pageSize}`}>
-                    {pageSize}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+              <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
+            </Button>
+            <Button
+              aria-label="Go to next page"
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
+            </Button>
+            <Button
+              aria-label="Go to last page"
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <DoubleArrowRightIcon className="h-4 w-4" aria-hidden="true" />
+            </Button>
           </div>
         </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            aria-label="Go to first page"
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <DoubleArrowLeftIcon className="h-4 w-4" aria-hidden="true" />
-          </Button>
-          <Button
-            aria-label="Go to previous page"
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
-          </Button>
-          <Button
-            aria-label="Go to next page"
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
-          </Button>
-          <Button
-            aria-label="Go to last page"
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <DoubleArrowRightIcon className="h-4 w-4" aria-hidden="true" />
-          </Button>
-        </div>
       </div>
     </>
   );

diff --git a/components/ui/data-table.tsx b/components/ui/data-table.tsx
@@ -51,7 +51,7 @@ export function DataTable<TData, TValue>({
         }
         className="w-full md:max-w-sm"
       />
-      <ScrollArea className="rounded-md border h-[50vh]">
+      <ScrollArea className="rounded-md border h-[calc(80vh-220px)]">
         <Table className="relative">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (