diff --git a/dashboard/src/components/entity-table/table-filtering.tsx b/dashboard/src/components/entity-table/table-filtering.tsx
@@ -14,7 +14,7 @@ export const TableFiltering: FC<TableFilteringProps> = () => {
placeholder={t('table.filter-placeholder', { name: filtering.column })}
value={filtering.columnFilters}
onChange={(e) => filtering.setColumnFilters(e.target.value)}
- className="max-w-sm"
+ className="max-w-sm w-[12rem] md:w-[20rem]"
/>
);
}
diff --git a/dashboard/src/components/entity-table/table.tsx b/dashboard/src/components/entity-table/table.tsx
@@ -2,7 +2,6 @@ import {
ColumnDef,
flexRender,
} from "@tanstack/react-table"
-
import {
Table,
TableBody,
@@ -28,7 +27,7 @@ export function EntityDataTable<TData, TValue>({
const { t } = useTranslation();
const { table, isLoading } = useEntityTableContext()
return (
- <Table>
+ <Table className="w-full">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
diff --git a/dashboard/src/components/page/index.tsx b/dashboard/src/components/page/index.tsx
@@ -10,8 +10,10 @@ interface PageProps extends PropsWithChildren { }
export const Page: FC<PageProps> = ({ children }) => {
return (
- <ScrollArea style={{ height: `calc(100vh - 4.5rem)` }} className="m-3">
- {children}
+ <ScrollArea style={{ height: `calc(100vh - 4.5rem)` }} className="sm:w-screen md:p-3 md:w-[100%]">
+ <div className="flex flex-col justify-center items-center h-full sm:w-screen md:w-[100%]">
+ {children}
+ </div>
</ScrollArea>
);
}
diff --git a/dashboard/src/routes/_dashboard/hosts.tsx b/dashboard/src/routes/_dashboard/hosts.tsx
@@ -7,7 +7,7 @@ export const HostsPage = () => {
const { t } = useTranslation()
return (
<Page>
- <Card>
+ <Card className="sm:w-screen md:w-full">
<CardHeader>
<CardTitle>
{t('hosts')}
diff --git a/dashboard/src/routes/_dashboard/nodes.tsx b/dashboard/src/routes/_dashboard/nodes.tsx
@@ -19,7 +19,7 @@ export const NodesPage: FC = () => {
const { t } = useTranslation();
return (
<Page>
- <Card>
+ <Card className="sm:w-screen md:w-full">
<CardHeader>
<CardTitle>
{t('nodes')}
diff --git a/dashboard/src/routes/_dashboard/services.tsx b/dashboard/src/routes/_dashboard/services.tsx
@@ -15,7 +15,7 @@ export const ServicesPage: FC = () => {
const { t } = useTranslation();
return (
<Page>
- <Card>
+ <Card className="sm:w-screen md:w-full">
<CardHeader>
<CardTitle>
{t('services')}
diff --git a/dashboard/src/routes/_dashboard/settings.tsx b/dashboard/src/routes/_dashboard/settings.tsx
@@ -8,7 +8,7 @@ export const Settings = () => {
const { t } = useTranslation()
return (
<Page>
- <Card className="m-3">
+ <Card className="sm:w-screen md:w-full">
<CardContent>
<CardHeader>
<CardTitle>
diff --git a/dashboard/src/routes/_dashboard/users.tsx b/dashboard/src/routes/_dashboard/users.tsx
@@ -21,7 +21,7 @@ export const UsersPage: FC = () => {
const { t } = useTranslation();
return (
<Page>
- <Card >
+ <Card className="sm:w-screen md:w-full">
<CardHeader>
<CardTitle>
{t('users')}