Refactor HandleSchedules component for improved UI and user experience

- Updated the layout of the HandleSchedules component to enhance the selection of predefined schedules and custom cron expressions.
- Introduced a flexbox layout for better spacing and organization of form elements.
- Improved placeholder text for clarity in the schedule selection dropdown.

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -185,13 +185,15 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 											</Tooltip>
 										</TooltipProvider>
 									</FormLabel>
+									<div className="flex flex-col gap-2">
 										<Select
-										onValueChange={(value) => field.onChange(value)}
+											onValueChange={(value) => {
-										value={field.value}
+												field.onChange(value);
+											}}
 										>
 											<FormControl>
 												<SelectTrigger>
-												<SelectValue placeholder="Select or type a cron expression" />
+													<SelectValue placeholder="Select a predefined schedule" />
 												</SelectTrigger>
 											</FormControl>
 											<SelectContent>
@@ -202,13 +204,15 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 												))}
 											</SelectContent>
 										</Select>
+										<div className="relative">
 											<FormControl>
 												<Input
 													placeholder="Custom cron expression (e.g., 0 0 * * *)"
 													{...field}
-											className="mt-2"
 												/>
 											</FormControl>
+										</div>
+									</div>
 									<FormDescription>
 										Choose a predefined schedule or enter a custom cron
 										expression