Skip to content

Commit e2afba5

Browse files
steveninhlesteveninhle
committed
chore: improve ui responsive mobile for pages
1 parent 4208255 commit e2afba5

11 files changed

Lines changed: 58 additions & 49 deletions

File tree

‎ui/dashboard/src/components/mobile-card/api-card/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,12 +176,12 @@ export const ApiCard: React.FC<ApiCardProps> = ({ data, onActions }) => {
176176
</div>
177177
</div>
178178

179-
<div className="flex-1 p-3 rounded-xl bg-gray-100 text-nowrap">
180-
<div className="flex-1">
179+
<div className="flex-1 p-3 rounded-xl bg-gray-100 min-w-0">
180+
<div className="flex-1 min-w-0">
181181
<p className="flex items-center gap-2 uppercase typo-para-tiny text-gray-500">
182182
<span>{t('environment')}</span>
183183
</p>
184-
<div className="mt-2 flex items-center gap-2">
184+
<div className="mt-2 flex items-center gap-2 min-w-0">
185185
<NameWithTooltip
186186
id={idEnv}
187187
align="center"

‎ui/dashboard/src/components/mobile-card/notification-card/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = ({
6464
onActions(data, 'EDIT');
6565
}}
6666
maxLines={1}
67-
className="min-w-[230px]"
6867
/>
6968
}
7069
maxLines={1}
@@ -93,19 +92,19 @@ export const NotificationCard: React.FC<NotificationCardProps> = ({
9392

9493
<Card.Meta>
9594
<div className="flex h-full w-full items-stretch justify-between gap-3 typo-para-medium">
96-
<div className="flex-1 py-3 rounded-xl bg-gray-100 text-nowrap">
97-
<div className="flex-1">
95+
<div className="flex-1 p-3 rounded-xl bg-gray-100 min-w-0">
96+
<div className="flex-1 min-w-0">
9897
<p className="flex items-center gap-2 uppercase typo-para-tiny text-gray-500">
9998
<span>{t('environment')}</span>
10099
</p>
101-
<div className="mt-2 flex items-center gap-2">
102-
<div className="text-gray-700 typo-para-medium">
100+
<div className="mt-2 flex items-center gap-2 min-w-0">
101+
<div className="text-gray-700 typo-para-medium truncate">
103102
{environmentName}
104103
</div>
105104
</div>
106105
</div>
107106
</div>
108-
<div className="flex-1 py-3 rounded-xl bg-gray-100">
107+
<div className="flex-1 p-3 rounded-xl bg-gray-100">
109108
<p className="flex items-center gap-2 uppercase typo-para-tiny text-gray-500">
110109
<span>{t('table:created-at')}</span>
111110
</p>

‎ui/dashboard/src/components/mobile-card/push-card/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const PushCard: React.FC<PushCardProps> = ({
6060
/>
6161
}
6262
triger={
63-
<div className="flex items-center gap-0.5 max-w-fit min-w-[230px]">
63+
<div className="flex items-center gap-0.5 min-w-0 flex-1">
6464
<NameWithTooltip
6565
id={id}
6666
content={<NameWithTooltip.Content content={name} id={id} />}
@@ -106,12 +106,12 @@ export const PushCard: React.FC<PushCardProps> = ({
106106
/>
107107
</div>
108108
<div className="flex h-full w-full items-stretch justify-between gap-3 typo-para-medium">
109-
<div className="flex-1 py-3 rounded-xl bg-gray-100 text-nowrap">
110-
<div className="flex-1">
109+
<div className="flex-1 p-3 rounded-xl bg-gray-100 min-w-0">
110+
<div className="flex-1 min-w-0">
111111
<p className="flex items-center gap-2 uppercase typo-para-tiny text-gray-500">
112112
<span>{t('environment')}</span>
113113
</p>
114-
<div className="mt-2 flex items-center gap-2">
114+
<div className="mt-2 flex items-center gap-2 min-w-0">
115115
<NameWithTooltip
116116
id={id}
117117
align="center"
@@ -134,7 +134,7 @@ export const PushCard: React.FC<PushCardProps> = ({
134134
</div>
135135
</div>
136136
</div>
137-
<div className="flex-1 py-3 rounded-xl bg-gray-100">
137+
<div className="flex-1 p-3 rounded-xl bg-gray-100">
138138
<p className="flex items-center gap-2 uppercase typo-para-tiny text-gray-500">
139139
<span>{t('table:created-at')}</span>
140140
</p>

‎ui/dashboard/src/elements/data-table/index.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ export const DataTable = <TData, TValue>({
7676
};
7777
}, [tableContainerRef.current]);
7878

79+
if (!isLoading && !table.getRowModel().rows?.length) {
80+
return (
81+
<div className="flex justify-center items-center w-full py-20">
82+
{emptyCollection}
83+
</div>
84+
);
85+
}
86+
7987
return (
8088
<div
8189
ref={tableContainerRef}
@@ -177,13 +185,7 @@ export const DataTable = <TData, TValue>({
177185
</Table.Row>
178186
);
179187
})
180-
) : (
181-
<Table.Row>
182-
<Table.Cell className="pt-32" colSpan={columns.length}>
183-
{emptyCollection}
184-
</Table.Cell>
185-
</Table.Row>
186-
)}
188+
) : null}
187189
</Table.Body>
188190
</Table.Root>
189191
</div>

‎ui/dashboard/src/elements/page-header/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const PageHeader = ({
3838
<h1 className="text-gray-900 typo-head-bold-huge">{title}</h1>
3939
{createdAt && <CreatedAtTime createdAt={createdAt} />}
4040
</div>
41-
<div className="flex items-center gap-4 text-gray-500">
41+
<div className="flex items-center gap-0 sm:gap-4 text-gray-500">
4242
{isShowApiEndpoint && <SDKApiEndpoint />}
4343
<SupportPopover />
4444
</div>

‎ui/dashboard/src/pages/experiments/overview/index.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -69,23 +69,31 @@ const Overview = ({
6969
const { t } = useTranslation(['table']);
7070

7171
return (
72-
<div className="flex flex-nowrap sm:flex-wrap overflow-x-scroll md:overflow-hidden hidden-scroll items-center w-full gap-6 pt-3 sm:pt-0 pb-3 sm:pb-8 px-3 sm:px-6">
73-
{overviewOptions.map((item, index) => (
74-
<OverviewCard
75-
key={index}
76-
title={t(item.titleKey)}
77-
count={summary && item.countKey ? Number(summary[item.countKey]) : 0}
78-
color={item.color}
79-
icon={item.icon}
80-
className={cn('border border-transparent', {
81-
'border-gray-300':
82-
filterBySummary && item.summaryFilterValue === filterBySummary
83-
})}
84-
onClick={() =>
85-
onChangeFilters(item.filterValues, item.summaryFilterValue)
86-
}
87-
/>
88-
))}
72+
<div className="w-full px-3 sm:px-6">
73+
<div className="flex flex-nowrap sm:flex-wrap overflow-x-scroll sm:overflow-visible hidden-scroll items-center w-full gap-4 sm:gap-6 pt-3 sm:pt-0 pb-4 sm:pb-8 px-3 sm:px-0">
74+
{overviewOptions.map((item, index) => (
75+
<div
76+
key={index}
77+
className="flex flex-1 min-w-[200px] sm:min-w-[268px]"
78+
>
79+
<OverviewCard
80+
title={t(item.titleKey)}
81+
count={
82+
summary && item.countKey ? Number(summary[item.countKey]) : 0
83+
}
84+
color={item.color}
85+
icon={item.icon}
86+
className={cn('border border-transparent', {
87+
'border-gray-300':
88+
filterBySummary && item.summaryFilterValue === filterBySummary
89+
})}
90+
onClick={() =>
91+
onChangeFilters(item.filterValues, item.summaryFilterValue)
92+
}
93+
/>
94+
</div>
95+
))}
96+
</div>
8997
</div>
9098
);
9199
};

‎ui/dashboard/src/pages/feature-flags/collection-layout/elements/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const GridViewRoot = ({ children }: PropsWithChildren) => (
5454
);
5555

5656
export const GridViewRow = ({ children }: PropsWithChildren) => (
57-
<div className="grid grid-cols-12 grid-rows-2 lg:grid-rows-1 gap-y-2 items-center w-full max-w-full p-5 gap-x-2 xxl:gap-x-10 rounded shadow-card bg-white self-stretch">
57+
<div className="grid grid-cols-12 grid-rows-2 lg:grid-rows-1 gap-y-2 items-center w-full max-w-full p-3 md:p-5 gap-x-2 xxl:gap-x-10 rounded shadow-card bg-white self-stretch">
5858
{children}
5959
</div>
6060
);
@@ -226,7 +226,7 @@ export const FlagNameElement = ({
226226
return (
227227
<div
228228
className={cn(
229-
'flex items-center col-span-6 lg:col-span-5 row-span-1 w-full max-w-full gap-x-10 overflow-hidden',
229+
'flex items-center col-span-7 lg:col-span-5 row-span-1 w-full max-w-full gap-x-10 overflow-hidden',
230230
className
231231
)}
232232
>

‎ui/dashboard/src/pages/feature-flags/collection-layout/grid-view-collection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const GridViewCollection = ({
109109
/>
110110
</div>
111111
</div>
112-
<div className="flex col-span-6 mt-3 lg:mt-0 lg:col-span-3 row-span-1 justify-end self-start gap-x-2">
112+
<div className="flex col-span-5 mt-3 lg:mt-0 lg:col-span-3 row-span-1 justify-end self-start gap-x-2">
113113
<div className="flex-center">
114114
<Icon icon={IconWatch} size={'xxs'} />
115115
</div>

‎ui/dashboard/src/pages/feature-flags/overview/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,13 @@ const Overview = ({
5656

5757
return (
5858
<div className="w-full px-3 sm:px-6">
59-
<div className="flex flex-nowrap sm:flex-wrap overflow-x-scroll sm:overflow-visible pt-3 sm:pt-0 px-3 sm:px-0 hidden-scroll items-center w-full gap-6 pb-4 sm:pb-8">
59+
<div className="flex flex-nowrap sm:flex-wrap overflow-x-scroll sm:overflow-visible pt-3 sm:pt-0 px-3 sm:px-0 hidden-scroll items-center w-full gap-4 sm:gap-6 pb-4 sm:pb-8">
6060
{overviewOptions.map((item, index) => (
6161
<Tooltip
6262
key={index}
6363
content={t(item.tooltipKey)}
6464
trigger={
65-
<div className="flex flex-1 w-full min-w-[268px]">
65+
<div className="flex flex-1 min-w-[200px] sm:min-w-[268px]">
6666
<OverviewCard
6767
title={t(item.titleKey)}
6868
count={

‎ui/dashboard/src/pages/project-details/environments/page-content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const PageContent = ({
100100

101101
<TabsContent
102102
value={filters.status}
103-
className="px-3 sm:px-6 pb-6 overflow-y-hidden overflow-x-auto"
103+
className="px-3 sm:px-6 pb-6 overflow-y-hidden overflow-x-auto hidden-scroll"
104104
>
105105
<CollectionLoader
106106
onAdd={onAdd}

0 commit comments

Comments
 (0)