fix(routes): ui from settings page

apps/ui/src/routes/settings/_Menu.svelte

@@ -7,7 +7,7 @@
 	{#if $appSession.teamId === '0'}
 		<a
 			href="/settings/global"
-			class="sub-menu no-underline"
+			class="sub-menu no-underline w-full"
 			class:sub-menu-active={$page.routeId === 'settings/global'}
 		>
 			Global Settings
@@ -15,7 +15,7 @@
 	{/if}
 	<a
 		href="/settings/ssh-keys"
-		class="sub-menu no-underline"
+		class="sub-menu no-underline w-full"
 		class:sub-menu-active={$page.routeId === 'settings/ssh-keys'}>SSH Keys</a
 	>
 </div>

apps/ui/src/routes/settings/global.svelte

@@ -198,12 +198,15 @@
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
 </div>
 <div class="mx-auto w-full">
-	<div class="flex flex-row">
+	<div class="flex lg:flex-row flex-col">
 		<Menu />
-		<div>
+		<div class="mt-5">
-			<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
+			<form on:submit|preventDefault={handleSubmit}>
-				<div class="flex space-x-1 pb-6">
+				<div
+					class="flex flex-col space-y-4 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
+				>
 					<div class="title font-bold">{$t('index.global_settings')}</div>
+					<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-4">
 						<button
 							class="btn btn-sm bg-settings text-black"
 							type="submit"
@@ -231,17 +234,14 @@
 							class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
 						>
 					</div>
-				<div class="grid grid-flow-row gap-2 px-10">
+				</div>
-					<!-- <Language /> -->
+				<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 p-6">
-					<div class="grid grid-cols-2 items-start">
-						<div class="flex-col">
 					<div class="pt-2 text-base font-bold text-stone-100">
 						{$t('application.url_fqdn')}
 						<Explainer explanation={$t('setting.ssl_explainer')} />
 					</div>
-						</div>
-						<div class="justify-start text-left">
 					<input
+						class="w-full"
 						bind:value={fqdn}
 						readonly={!$appSession.isAdmin || isFqdnSet}
 						disabled={!$appSession.isAdmin || isFqdnSet}
@@ -286,34 +286,27 @@
 							{/if}
 						</div>
 					{/if}
-						</div>
-					</div>
-					<div class="grid grid-cols-2 items-start py-6">
-						<div class="flex-col">
 					<div class="pt-2 text-base font-bold text-stone-100">
 						{$t('forms.public_port_range')}
 						<Explainer explanation={$t('forms.public_port_range_explainer')} />
 					</div>
-						</div>
+					<div class="flex flex-row items-center space-x-2">
-						<div class="mx-auto flex-row items-center justify-center space-y-2">
 						<input
-								class="h-8 w-20 px-2"
+							class="h-8 w-full px-2"
 							type="number"
 							bind:value={minPort}
 							min="1024"
 							max={maxPort}
 						/>
-							-
+						<p>-</p>
 						<input
-								class="h-8 w-20 px-2"
+							class="h-8 w-full px-2"
 							type="number"
 							bind:value={maxPort}
 							min={minPort}
 							max="65543"
 						/>
 					</div>
-					</div>
-					<div class="grid grid-cols-2 items-center">
 					<Setting
 						id="isDNSCheckEnabled"
 						bind:setting={isDNSCheckEnabled}
@@ -321,19 +314,12 @@
 						description={$t('setting.is_dns_check_enabled_explainer')}
 						on:click={() => changeSettings('isDNSCheckEnabled')}
 					/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
 					<div class="text-base font-bold text-stone-100">
 						Custom DNS servers <Explainer
 							explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used."
 						/>
 					</div>
-
+					<input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
-						<div class="flex-row items-center justify-center">
-							<input placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
-						</div>
-					</div>
-					<div class="grid grid-cols-2 items-center">
 					<Setting
 						id="dualCerts"
 						dataTooltip={$t('setting.must_remove_domain_before_changing')}
@@ -343,8 +329,6 @@
 						description={$t('setting.generate_www_non_www_ssl')}
 						on:click={() => !isFqdnSet && changeSettings('dualCerts')}
 					/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
 					<Setting
 						id="isRegistrationEnabled"
 						bind:setting={isRegistrationEnabled}
@@ -352,8 +336,6 @@
 						description={$t('setting.registration_allowed_explainer')}
 						on:click={() => changeSettings('isRegistrationEnabled')}
 					/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
 					<Setting
 						id="isAPIDebuggingEnabled"
 						bind:setting={isAPIDebuggingEnabled}
@@ -361,9 +343,7 @@
 						description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
 						on:click={() => changeSettings('isAPIDebuggingEnabled')}
 					/>
-					</div>
 					{#if browser && $features.beta}
-						<div class="grid grid-cols-2 items-center">
 						<Setting
 							id="isAutoUpdateEnabled"
 							bind:setting={isAutoUpdateEnabled}
@@ -371,7 +351,6 @@
 							description={$t('setting.auto_update_enabled_explainer')}
 							on:click={() => changeSettings('isAutoUpdateEnabled')}
 						/>
-						</div>
 					{/if}
 				</div>
 			</form>

apps/ui/src/routes/settings/ssh-keys.svelte

@@ -61,10 +61,13 @@
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
 </div>
 <div class="mx-auto w-full">
-	<div class="flex flex-row">
+	<div class="flex lg:flex-row flex-col">
 		<Menu />
-		<div class="grid grid-flow-row gap-2 py-4">
+		<div class="flex flex-col mt-5">
-			<div class="flex space-x-1 pb-6">
+			<div
+					class="flex flex-col space-y-4 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
+					style="min-width: 83vw"
+				>
 				<div class="title font-bold">SSH Keys</div>
 				<button
 					on:click={() => (isModalActive = true)}
@@ -72,7 +75,7 @@
 					disabled={loading.save}>New SSH Key</button
 				>
 			</div>
-			<div class="grid grid-flow-col gap-2 px-10">
+			<div class="grid grid-flow-col gap-2 lg:px-10 px-6">
 				{#if sshKeys.length === 0}
 					<div class="text-sm ">No SSH keys found</div>
 				{:else}