fix: ui responsiveness for mobile, tab and desktop screens

Signed-off-by: Nahidujjaman Hridoy <hridoyboss12@gmail.com>

.vscode/settings.json

@@ -4,5 +4,8 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.biome": "explicit",
 		"source.organizeImports.biome": "explicit"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }

apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx

@@ -107,19 +107,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 
 	return (
 		<Form {...form}>
-			<form
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-				onSubmit={form.handleSubmit(onSubmit)}
+				<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 items-start">
-				className="flex flex-col gap-4"
-			>
-				<div className="grid md:grid-cols-2 gap-4">
-					<div className="flex items-end col-span-2 gap-4">
-						<div className="grow">
 					<FormField
 						control={form.control}
 						name="repositoryURL"
 						render={({ field }) => (
-									<FormItem>
+							<FormItem className="col-span-2 lg:col-span-3">
-										<div className="flex items-center justify-between">
+								<div className="flex items-center justify-between h-5">
 									<FormLabel>Repository URL</FormLabel>
 									{field.value?.startsWith("https://") && (
 										<Link
@@ -140,13 +135,12 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</FormItem>
 						)}
 					/>
-						</div>
 					{sshKeys && sshKeys.length > 0 ? (
 						<FormField
 							control={form.control}
 							name="sshKey"
 							render={({ field }) => (
-									<FormItem className="basis-40">
+								<FormItem className="col-span-2 lg:col-span-1">
 									<FormLabel className="w-full inline-flex justify-between">
 										SSH Key
 										<LockIcon className="size-4 text-muted-foreground" />
@@ -185,17 +179,17 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							variant="secondary"
 							onClick={() => router.push("/dashboard/settings/ssh-keys")}
 							type="button"
+							className="col-span-2 lg:col-span-1 lg:mt-7"
 						>
 							<KeyRoundIcon className="size-4" /> Add SSH Key
 						</Button>
 					)}
-					</div>
+
-					<div className="space-y-4">
 					<FormField
 						control={form.control}
 						name="branch"
 						render={({ field }) => (
-								<FormItem>
+							<FormItem className="col-span-2">
 								<FormLabel>Branch</FormLabel>
 								<FormControl>
 									<Input placeholder="Branch" {...field} />
@@ -204,13 +198,12 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</FormItem>
 						)}
 					/>
-					</div>
 
 					<FormField
 						control={form.control}
 						name="buildPath"
 						render={({ field }) => (
-							<FormItem>
+							<FormItem className="col-span-2">
 								<FormLabel>Build Path</FormLabel>
 								<FormControl>
 									<Input placeholder="/" {...field} />
@@ -223,7 +216,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 						control={form.control}
 						name="watchPaths"
 						render={({ field }) => (
-							<FormItem className="md:col-span-2">
+							<FormItem className="col-span-2 lg:col-span-4">
 								<div className="flex items-center gap-2">
 									<FormLabel>Watch Paths</FormLabel>
 									<TooltipProvider>

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

@@ -58,7 +58,10 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 				<CardHeader>
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
-				<CardContent className="flex flex-row gap-4 flex-wrap">
+				<CardContent
+					// className="flex flex-row gap-4 flex-wrap"
+					className="grid grid-cols-2 lg:flex lg:flex-row lg:flex-wrap gap-4"
+				>
 					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
 						{canDeploy && (
 							<DialogAction
@@ -274,14 +277,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					>
 						<Button
 							variant="outline"
-							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2 col-span-2"
 						>
 							<Terminal className="size-4 mr-1" />
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
 					{canUpdateService && (
-						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<div className="flex flex-row items-center gap-2 justify-between rounded-md px-4 py-2 border col-span-2 md:col-span-1">
 							<span className="text-sm font-medium">Autodeploy</span>
 							<Switch
 								aria-label="Toggle autodeploy"
@@ -305,7 +308,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					)}
 
 					{canUpdateService && (
-						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<div className="flex flex-row items-center gap-2 justify-between rounded-md px-4 py-2 border col-span-2 md:col-span-1">
 							<span className="text-sm font-medium">Clean Cache</span>
 							<Switch
 								aria-label="Toggle clean cache"

apps/dokploy/components/shared/advance-breadcrumb.tsx

@@ -342,7 +342,7 @@ export const AdvanceBreadcrumb = () => {
 								className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 							>
 								<FolderInput className="size-4 text-muted-foreground" />
-								<span className="font-medium max-w-[150px] truncate">
+								<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
 									{currentProject?.name || "Select Project"}
 								</span>
 								<ChevronDown className="size-4 text-muted-foreground" />
@@ -478,7 +478,7 @@ export const AdvanceBreadcrumb = () => {
 									aria-expanded={environmentOpen}
 									className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 								>
-									<span className="font-medium max-w-[150px] truncate">
+									<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
 										{currentEnvironment?.name || "production"}
 									</span>
 									<ChevronDown className="size-4 text-muted-foreground" />
@@ -533,7 +533,7 @@ export const AdvanceBreadcrumb = () => {
 					)}
 
 					{projectEnvironments && projectEnvironments.length === 1 && (
-						<p className="text-sm font-normal ml-1">
+						<p className="text-sm font-normal ml-1 max-w-[50px] md:max-w-[150px] truncate">
 							{currentEnvironment?.name || "production"}
 						</p>
 					)}
@@ -551,7 +551,7 @@ export const AdvanceBreadcrumb = () => {
 										className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 									>
 										{getServiceIcon(currentService.type)}
-										<span className="font-medium max-w-[150px] truncate">
+										<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
 											{currentService.name}
 										</span>
 										<ChevronDown className="size-4 text-muted-foreground" />
@@ -617,7 +617,7 @@ export const AdvanceBreadcrumb = () => {
 							<Button
 								variant="ghost"
 								size="icon"
-								className="size-7 ml-1"
+								className="size-7 ml-1 hidden md:flex"
 								onClick={() => {
 									router.push(
 										`/dashboard/project/${projectId}/environment/${environmentId}`,

apps/dokploy/components/ui/button.tsx

@@ -63,6 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 					className={cn(
 						buttonVariants({ variant, size, className }),
 						"flex gap-2",
+						className,
 					)}
 					ref={ref}
 					{...props}