Skip to content

Commit 10af792

Browse files
authored
Merge pull request #2156 from gentslava/fix/overflow-scroll
fix(ui): tabs overflow and Tailwind config
2 parents c64cdca + 027853a commit 10af792

5 files changed

Lines changed: 18 additions & 36 deletions

File tree

apps/dokploy/components/dashboard/application/general/generic/show.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
153153
setSab(e as TabState);
154154
}}
155155
>
156-
<div className="flex flex-row items-center justify-between w-full gap-4">
157-
<TabsList className="md:grid md:w-fit md:grid-cols-7 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
156+
<div className="flex flex-row items-center justify-between w-full overflow-auto">
157+
<TabsList className="flex gap-4 justify-start bg-transparent">
158158
<TabsTrigger
159159
value="github"
160160
className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,8 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
142142
setSab(e as TabState);
143143
}}
144144
>
145-
<div className="flex flex-row items-center justify-between w-full gap-4">
146-
<TabsList className="md:grid md:w-fit md:grid-cols-6 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
145+
<div className="flex flex-row items-center justify-between w-full overflow-auto">
146+
<TabsList className="flex gap-4 justify-start bg-transparent">
147147
<TabsTrigger
148148
value="github"
149149
className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -111,13 +111,13 @@ const Service = (
111111
</title>
112112
</Head>
113113
<div className="w-full">
114-
<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
114+
<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
115115
<div className="rounded-xl bg-background shadow-md ">
116116
<CardHeader className="flex flex-row justify-between items-center">
117117
<div className="flex flex-col">
118118
<CardTitle className="text-xl flex flex-row gap-2">
119119
<div className="relative flex flex-row gap-4">
120-
<div className="absolute -right-1 -top-2">
120+
<div className="absolute -right-1 -top-2">
121121
<StatusTooltip status={data?.applicationStatus} />
122122
</div>
123123

@@ -218,17 +218,8 @@ const Service = (
218218
router.push(newPath);
219219
}}
220220
>
221-
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
222-
<TabsList
223-
className={cn(
224-
"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
225-
isCloud && data?.serverId
226-
? "md:grid-cols-7"
227-
: data?.serverId
228-
? "md:grid-cols-6"
229-
: "md:grid-cols-7",
230-
)}
231-
>
221+
<div className="flex flex-row items-center justify-between w-full overflow-auto">
222+
<TabsList className="flex gap-8 max-md:gap-4 justify-start">
232223
<TabsTrigger value="general">General</TabsTrigger>
233224
<TabsTrigger value="environment">Environment</TabsTrigger>
234225
<TabsTrigger value="domains">Domains</TabsTrigger>
@@ -308,23 +299,23 @@ const Service = (
308299
</TabsContent>
309300

310301
<TabsContent value="logs">
311-
<div className="flex flex-col gap-4 pt-2.5">
302+
<div className="flex flex-col gap-4 pt-2.5">
312303
<ShowDockerLogs
313304
appName={data?.appName || ""}
314305
serverId={data?.serverId || ""}
315306
/>
316307
</div>
317308
</TabsContent>
318309
<TabsContent value="schedules">
319-
<div className="flex flex-col gap-4 pt-2.5">
310+
<div className="flex flex-col gap-4 pt-2.5">
320311
<ShowSchedules
321312
id={applicationId}
322313
scheduleType="application"
323314
/>
324315
</div>
325316
</TabsContent>
326317
<TabsContent value="deployments" className="w-full pt-2.5">
327-
<div className="flex flex-col gap-4 border rounded-lg">
318+
<div className="flex flex-col gap-4 border rounded-lg">
328319
<ShowDeployments
329320
id={applicationId}
330321
type="application"
@@ -334,7 +325,7 @@ const Service = (
334325
</div>
335326
</TabsContent>
336327
<TabsContent value="volume-backups" className="w-full pt-2.5">
337-
<div className="flex flex-col gap-4 border rounded-lg">
328+
<div className="flex flex-col gap-4 border rounded-lg">
338329
<ShowVolumeBackups
339330
id={applicationId}
340331
type="application"

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,14 @@ const Service = (
102102
</title>
103103
</Head>
104104
<div className="w-full">
105-
<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
105+
<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
106106
<div className="rounded-xl bg-background shadow-md ">
107107
<div className="flex flex-col gap-4">
108108
<CardHeader className="flex flex-row justify-between items-center">
109109
<div className="flex flex-col">
110110
<CardTitle className="text-xl flex flex-row gap-2">
111111
<div className="relative flex flex-row gap-4">
112-
<div className="absolute -right-1 -top-2">
112+
<div className="absolute -right-1 -top-2">
113113
<StatusTooltip status={data?.composeStatus} />
114114
</div>
115115

@@ -211,17 +211,8 @@ const Service = (
211211
router.push(newPath);
212212
}}
213213
>
214-
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
215-
<TabsList
216-
className={cn(
217-
"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
218-
isCloud && data?.serverId
219-
? "md:grid-cols-7"
220-
: data?.serverId
221-
? "md:grid-cols-6"
222-
: "md:grid-cols-7",
223-
)}
224-
>
214+
<div className="flex flex-row items-center w-full overflow-auto">
215+
<TabsList className="flex gap-8 max-md:gap-4 justify-start">
225216
<TabsTrigger value="general">General</TabsTrigger>
226217
<TabsTrigger value="environment">Environment</TabsTrigger>
227218
<TabsTrigger value="domains">Domains</TabsTrigger>
@@ -340,7 +331,7 @@ const Service = (
340331
</TabsContent>
341332

342333
<TabsContent value="deployments" className="w-full pt-2.5">
343-
<div className="flex flex-col gap-4 border rounded-lg">
334+
<div className="flex flex-col gap-4 border rounded-lg">
344335
<ShowDeployments
345336
id={composeId}
346337
type="compose"

apps/dokploy/tailwind.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const config = {
2323
sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
2424
},
2525
screens: {
26-
"3xl": "120rem",
26+
"3xl": "1920px",
2727
},
2828
maxWidth: {
2929
"2xl": "40rem",

0 commit comments

Comments
 (0)