Correcting some bugs and working on responsive.

app/(customer)/dashboard/layout.tsx

@@ -25,6 +25,7 @@ export default async function Layout({children}: { children: React.ReactNode })
 
     return (
         <SidebarProvider>
+            <div className="flex flex-col lg:flex-row w-full">
                 <AppSidebar/>
                 <SidebarInset>
                     <Header/>
@@ -32,6 +33,7 @@ export default async function Layout({children}: { children: React.ReactNode })
                         {children}
                     </main>
                 </SidebarInset>
+            </div>
         </SidebarProvider>
     )
 }

app/(customer)/dashboard/profile/page.tsx

@@ -27,13 +27,18 @@ export default async function RoutePage(props: PageParams<{}>) {
                         <AvatarWithUpload user={userInfo}/>
                         {user.name}
                         <Badge className="ml-3 hidden lg:block">{userInfo.authMethod}</Badge>
+                        <Badge className="ml-3 hidden lg:block">{userInfo.role}</Badge>
                     </PageTitle>
-                    <PageActions className={"mt-2"}>
+                    <PageActions className="mt-2 hidden sm:block">
                         <ButtonDeleteAccount text="Delete my account"/>
                     </PageActions>
                 </div>
             <PageContent>
                 <UserForm  userId={userInfo.id} defaultValues={userInfo}/>
+                <div className="mt-4 sm:hidden">
+                    <ButtonDeleteAccount text="Delete my account" />
+                </div>
+
             </PageContent>
         </Page>
     )

src/components/wrappers/Dashboard/Settings/SettingsTabs/SettingsTabs.tsx

@@ -17,9 +17,10 @@ export type SettingsTabsProps = {
 export const SettingsTabs = (props: SettingsTabsProps) => {
 
     return(
+
         <Tabs defaultValue="informations" >
             <TabsList className="w-full">
-                <TabsTrigger className="w-full" value="informations">Informations</TabsTrigger>
+                <TabsTrigger className="w-full " value="informations">Info</TabsTrigger>
                 <TabsTrigger className="w-full " value="users">Users</TabsTrigger>
                 <TabsTrigger className="w-full " value="email">Email</TabsTrigger>
                 <TabsTrigger className="w-full " value="storage">Storage</TabsTrigger>
@@ -34,7 +35,7 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
                     <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
                 </div>
             </TabsContent>
-            <TabsContent value="users" className="h-full justify-between">
+            <TabsContent value="users" >
                 <SettingsUsersTab users={props.users}/>
             </TabsContent>
             <TabsContent value="email">
@@ -44,5 +45,6 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
                 <SettingsStorageTab settings={props.settings}/>
             </TabsContent>
         </Tabs>
+
     )
 }

src/components/wrappers/Dashboard/Settings/SettingsUsersTab/SettingsUsersTab.tsx

@@ -9,6 +9,7 @@ export type SettingsUsersTabProps = {
 
 export const SettingsUsersTab = (props: SettingsUsersTabProps) => {
     return (
+
         <div className="flex flex-col h-full  py-4">
             <div className="flex gap-4 h-fit justify-between">
                 <h1>List of Portabase users</h1>

src/components/wrappers/table/data-table.tsx

@@ -7,7 +7,9 @@ export type dataTableProps = {
 
 export const DataTable = ({table}: dataTableProps) => {
     return (
-        <Table>
+        <div className="rounded-md border w-full ">
+            <Table className="w-full">
+
                 <TableHeader>
                     {table.getHeaderGroups().map((headerGroup) => (
                         <TableRow key={headerGroup.id}>
@@ -49,5 +51,6 @@ export const DataTable = ({table}: dataTableProps) => {
                     )}
                 </TableBody>
             </Table>
+        </div>
     )
 }

src/components/wrappers/table/table-pagination-size.tsx

@@ -8,22 +8,20 @@ export type tablePaginationSizeProps = {
     pageSizeOptions?: number[]
 }
 
-
 export const TablePaginationSize = (props: tablePaginationSizeProps) => {
-
-    const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
+    const { className, table, pageSizeOptions = [10, 20, 30, 40, 50] } = props;
 
     useEffect(() => {
-        table.setPageSize(Number(pageSizeOptions[0]))
+        table.setPageSize(Number(pageSizeOptions[0]));
     }, []);
 
     return (
-        <div className={cn("flex items-center justify-center space-x-2", className)}>
+        <div className={cn("flex items-center justify-end sm:justify-center space-x-2", className)}>
             <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}
                 onValueChange={(value) => {
-                    table.setPageSize(Number(value))
+                    table.setPageSize(Number(value));
                 }}
             >
                 <SelectTrigger className="h-8 w-[4.5rem]">
@@ -38,6 +36,5 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
                 </SelectContent>
             </Select>
         </div>
-    )
-
-}
+    );
+};

src/components/wrappers/table/table-pagination.tsx

@@ -16,9 +16,9 @@ export function TablePagination(props: tablePaginationProps) {
     const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
     return (
-        <div className={cn("flex mt-6", className)}>
+        <div className={cn("flex flex-col sm:flex-row mt-6", className)}>
             <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions} />
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end"/>
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-5 sm:mt-0" />
         </div>
-    )
+    );
 }