Skip to content

Commit bf37bcb

Browse files
x0sinax0sina
committed
fix(users table): improve users table responsive layout
1 parent d22aa75 commit bf37bcb

File tree

3 files changed

+25
-24
lines changed

3 files changed

+25
-24
lines changed

‎dashboard/src/components/StatusBadge.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ export const StatusBadge: FC<UserStatusProps> = ({ expiryDate = null, status: us
5959
)}
6060
>
6161
<div className={cn('flex items-center gap-1 sm:px-1', showExpiry && 'px-1')}>
62-
{StatusIcon && <StatusIcon className="h-4 w-4 md:h-3 md:w-3" />}
63-
<span className={cn('hidden text-nowrap text-xs font-medium capitalize md:block', showExpiry && 'block')}>{userStatus && t(`status.${userStatus}`)}</span>
62+
{StatusIcon && <StatusIcon className="h-4 w-4 sm:h-3 sm:w-3" />}
63+
<span className={cn('hidden text-nowrap text-xs font-medium capitalize sm:block', showExpiry && 'block')}>{userStatus && t(`status.${userStatus}`)}</span>
6464
</div>
6565
</Badge>
6666
<div className={cn(!dateInfo.time && !dateInfo.status && 'hidden', showExpiry ? 'block' : 'hidden md:block')}>
@@ -72,4 +72,4 @@ export const StatusBadge: FC<UserStatusProps> = ({ expiryDate = null, status: us
7272
</div>
7373
</div>
7474
)
75-
}
75+
}

‎dashboard/src/components/users/columns.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,17 @@ export const setupColumns = ({
3636
cell: ({ row }) => {
3737
return (
3838
<div className="overflow-hidden text-ellipsis whitespace-nowrap pl-1 font-medium md:pl-2">
39-
<div className="flex items-start gap-x-2 px-1 py-1">
40-
<div className="flex-shrink-0 pt-1">
39+
<div className="flex items-start gap-x-3 px-1 py-1">
40+
<div className="pt-1">
4141
<OnlineBadge lastOnline={row.original.online_at} />
4242
</div>
43-
<div className="flex min-w-0 flex-1 flex-col gap-y-0.5 overflow-hidden text-ellipsis whitespace-nowrap">
43+
<div className="flex flex-col gap-y-0.5 overflow-hidden text-ellipsis whitespace-nowrap">
4444
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">{row.getValue('username')}</span>
4545
{row.original.admin?.username && (
4646
<span className="flex items-center gap-x-0.5 overflow-hidden text-xs font-normal text-muted-foreground">
4747
<span className="hidden sm:block">{t('created')}</span>
4848
<span>{t('by')}</span>
49-
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-blue-500">{row.original.admin?.username}</span>
49+
<span className="text-blue-500">{row.original.admin?.username}</span>
5050
</span>
5151
)}
5252
</div>
@@ -93,7 +93,7 @@ export const setupColumns = ({
9393
const status: UserResponse['status'] = row.getValue('status')
9494
const expire = row.original.expire
9595
return (
96-
<div className="flex flex-col gap-y-2 py-1 overflow-hidden">
96+
<div className="flex flex-col gap-y-2 py-1">
9797
<div className="hidden md:block">
9898
<StatusBadge expiryDate={expire} status={status} showExpiry />
9999
</div>
@@ -127,10 +127,8 @@ export const setupColumns = ({
127127
),
128128
cell: ({ row }) => (
129129
<div className="flex items-center justify-between gap-2">
130-
<div className="flex-1 min-w-0">
131-
<UsageSliderCompact total={row.original.data_limit} used={row.original.used_traffic} totalUsedTraffic={row.original.lifetime_used_traffic} status={row.original.status} />
132-
</div>
133-
<div className="hidden flex-shrink-0 px-2 py-1 md:block">
130+
<UsageSliderCompact total={row.original.data_limit} used={row.original.used_traffic} totalUsedTraffic={row.original.lifetime_used_traffic} status={row.original.status} />
131+
<div className="hidden w-[200px] px-4 py-1 md:block">
134132
<ActionButtons user={row.original} />
135133
</div>
136134
</div>
@@ -141,4 +139,4 @@ export const setupColumns = ({
141139
header: () => <div className="w-10" />,
142140
cell: () => <div className="flex flex-wrap justify-between"></div>,
143141
},
144-
]
142+
]

‎dashboard/src/components/users/data-table.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const DataTable = memo(<TData extends UserResponse, TValue>({ columns, da
106106

107107
return (
108108
<div className="overflow-hidden rounded-md border">
109-
<Table dir={isRTL ? 'rtl' : 'ltr'} className="table-fixed md:table-auto">
109+
<Table dir={isRTL ? 'rtl' : 'ltr'}>
110110
<TableHeader>
111111
{table.getHeaderGroups().map(headerGroup => (
112112
<TableRow key={headerGroup.id} className="uppercase">
@@ -116,11 +116,11 @@ export const DataTable = memo(<TData extends UserResponse, TValue>({ columns, da
116116
className={cn(
117117
'sticky z-10 bg-background text-xs',
118118
isRTL && 'text-right',
119-
index === 0 && 'min-w-0 max-w-[40%] md:w-auto',
120-
index === 1 && 'w-[70px] min-w-[70px] !px-0 md:w-auto',
121-
index === 2 && 'min-w-0 flex-1 px-1 md:w-[450px]',
119+
index === 0 && 'w-[200px] sm:w-[270px] md:w-auto',
120+
index === 1 && 'max-w-[70px] !px-0 md:w-auto',
121+
index === 2 && 'min-w-[100px] px-1 md:w-[450px]',
122122
index >= 3 && 'hidden md:table-cell',
123-
header.id === 'chevron' && 'table-cell w-10 flex-shrink-0 md:hidden',
123+
header.id === 'chevron' && 'table-cell md:hidden',
124124
)}
125125
>
126126
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
@@ -144,14 +144,17 @@ export const DataTable = memo(<TData extends UserResponse, TValue>({ columns, da
144144
<TableCell
145145
key={cell.id}
146146
className={cn(
147-
'whitespace-nowrap py-2 text-sm',
148-
index <= 1 && 'max-w-[calc(100vw-50px-32px-100px-48px)] md:py-2',
149-
index === 2 && 'w-[120px] !p-0 px-1',
147+
'text-sm',
148+
index !== 2 && 'whitespace-nowrap',
149+
index === 2 && 'md:whitespace-nowrap',
150+
index !== 2 && 'py-1.5',
151+
index <= 1 && 'max-w-[calc(100vw-50px-32px-100px-60px)] md:py-2',
152+
index === 2 && 'min-w-[100px] max-w-full md:w-[450px]',
150153
index === 3 && 'w-8',
151-
index === 3 && isRTL ? '!pr-0' : index === 3 && !isRTL && '!pl-0',
154+
index === 3 && "!p-0",
152155
index >= 4 && 'hidden !p-0 md:table-cell',
153156
cell.column.id === 'chevron' && 'table-cell md:hidden',
154-
isRTL ? 'pl-1.5 sm:pl-3' : 'pr-1.5 sm:pr-3',
157+
index !== 2 && (isRTL ? 'pl-1.5 sm:pl-3' : 'pr-1.5 sm:pr-3'),
155158
)}
156159
>
157160
{cell.column.id === 'chevron' ? (
@@ -184,4 +187,4 @@ export const DataTable = memo(<TData extends UserResponse, TValue>({ columns, da
184187
</Table>
185188
</div>
186189
)
187-
})
190+
})

0 commit comments

Comments
 (0)