andwati/dokploy
1
0
Fork 0
mirror of https://github.com/andwati/dokploy.git synced 2026-11-11 22:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2156 from gentslava/fix/overflow-scroll

Browse Source 
fix(ui): tabs overflow and Tailwind config
This commit is contained in:
Mauricio Siu
2025-07-11 22:58:41 -06:00
committed by GitHub
parent c64cdca2e8 027853a361
commit 10af7925db
5 changed files with 18 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dokploy/components/dashboard/application/general/generic/show.tsx
+2 -2
View File
@@ -153,8 +153,8 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
setSab(e as TabState); setSab(e as TabState);
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4"> <div className="flex flex-row items-center justify-between w-full overflow-auto">
<TabsList className="md:grid md:w-fit md:grid-cols-7 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden"> <TabsList className="flex gap-4 justify-start bg-transparent">
<TabsTrigger <TabsTrigger
value="github" value="github"
className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border" 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
+2 -2
View File
@@ -142,8 +142,8 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
setSab(e as TabState); setSab(e as TabState);
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4"> <div className="flex flex-row items-center justify-between w-full overflow-auto">
<TabsList className="md:grid md:w-fit md:grid-cols-6 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden"> <TabsList className="flex gap-4 justify-start bg-transparent">
<TabsTrigger <TabsTrigger
value="github" value="github"
className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border" 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
+8 -17
View File
@@ -111,13 +111,13 @@ const Service = (
</title> </title>
</Head> </Head>
<div className="w-full"> <div className="w-full">
<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full"> <Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
<div className="rounded-xl bg-background shadow-md "> <div className="rounded-xl bg-background shadow-md ">
<CardHeader className="flex flex-row justify-between items-center"> <CardHeader className="flex flex-row justify-between items-center">
<div className="flex flex-col"> <div className="flex flex-col">
<CardTitle className="text-xl flex flex-row gap-2"> <CardTitle className="text-xl flex flex-row gap-2">
<div className="relative flex flex-row gap-4"> <div className="relative flex flex-row gap-4">
<div className="absolute -right-1 -top-2"> <div className="absolute -right-1 -top-2">
<StatusTooltip status={data?.applicationStatus} /> <StatusTooltip status={data?.applicationStatus} />
</div> </div>
@@ -218,17 +218,8 @@ const Service = (
router.push(newPath); router.push(newPath);
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll"> <div className="flex flex-row items-center justify-between w-full overflow-auto">
<TabsList <TabsList className="flex gap-8 max-md:gap-4 justify-start">
className={cn(
"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
isCloud && data?.serverId
? "md:grid-cols-7"
: data?.serverId
? "md:grid-cols-6"
: "md:grid-cols-7",
)}
>
<TabsTrigger value="general">General</TabsTrigger> <TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger> <TabsTrigger value="environment">Environment</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger> <TabsTrigger value="domains">Domains</TabsTrigger>
@@ -308,7 +299,7 @@ const Service = (
</TabsContent> </TabsContent>
<TabsContent value="logs"> <TabsContent value="logs">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowDockerLogs <ShowDockerLogs
appName={data?.appName || ""} appName={data?.appName || ""}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
@@ -316,7 +307,7 @@ const Service = (
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="schedules"> <TabsContent value="schedules">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowSchedules <ShowSchedules
id={applicationId} id={applicationId}
scheduleType="application" scheduleType="application"
@@ -324,7 +315,7 @@ const Service = (
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="deployments" className="w-full pt-2.5"> <TabsContent value="deployments" className="w-full pt-2.5">
<div className="flex flex-col gap-4 border rounded-lg"> <div className="flex flex-col gap-4 border rounded-lg">
<ShowDeployments <ShowDeployments
id={applicationId} id={applicationId}
type="application" type="application"
@@ -334,7 +325,7 @@ const Service = (
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="volume-backups" className="w-full pt-2.5"> <TabsContent value="volume-backups" className="w-full pt-2.5">
<div className="flex flex-col gap-4 border rounded-lg"> <div className="flex flex-col gap-4 border rounded-lg">
<ShowVolumeBackups <ShowVolumeBackups
id={applicationId} id={applicationId}
type="application" type="application"
apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
+5 -14
View File
@@ -102,14 +102,14 @@ const Service = (
</title> </title>
</Head> </Head>
<div className="w-full"> <div className="w-full">
<Card className="h-full bg-sidebar p-2.5 rounded-xl w-full"> <Card className="h-full bg-sidebar p-2.5 rounded-xl w-full">
<div className="rounded-xl bg-background shadow-md "> <div className="rounded-xl bg-background shadow-md ">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<CardHeader className="flex flex-row justify-between items-center"> <CardHeader className="flex flex-row justify-between items-center">
<div className="flex flex-col"> <div className="flex flex-col">
<CardTitle className="text-xl flex flex-row gap-2"> <CardTitle className="text-xl flex flex-row gap-2">
<div className="relative flex flex-row gap-4"> <div className="relative flex flex-row gap-4">
<div className="absolute -right-1 -top-2"> <div className="absolute -right-1 -top-2">
<StatusTooltip status={data?.composeStatus} /> <StatusTooltip status={data?.composeStatus} />
</div> </div>
@@ -211,17 +211,8 @@ const Service = (
router.push(newPath); router.push(newPath);
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll"> <div className="flex flex-row items-center w-full overflow-auto">
<TabsList <TabsList className="flex gap-8 max-md:gap-4 justify-start">
className={cn(
"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
isCloud && data?.serverId
? "md:grid-cols-7"
: data?.serverId
? "md:grid-cols-6"
: "md:grid-cols-7",
)}
>
<TabsTrigger value="general">General</TabsTrigger> <TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger> <TabsTrigger value="environment">Environment</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger> <TabsTrigger value="domains">Domains</TabsTrigger>
@@ -340,7 +331,7 @@ const Service = (
</TabsContent> </TabsContent>
<TabsContent value="deployments" className="w-full pt-2.5"> <TabsContent value="deployments" className="w-full pt-2.5">
<div className="flex flex-col gap-4 border rounded-lg"> <div className="flex flex-col gap-4 border rounded-lg">
<ShowDeployments <ShowDeployments
id={composeId} id={composeId}
type="compose" type="compose"
apps/dokploy/tailwind.config.ts
+1 -1
View File
@@ -23,7 +23,7 @@ const config = {
sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans], sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
}, },
screens: { screens: {
"3xl": "120rem", "3xl": "1920px",
}, },
maxWidth: { maxWidth: {
"2xl": "40rem", "2xl": "40rem",