fix(hub): refactor validation for functions (#2647)

## Changes

1. Modified the path validation regex in `route-edit-form.tsx` to allow empty paths by:
   - Removing the `.min(1)` validation
   - Changing the regex from `/^(\/[a-zA-Z0-9-_]+)+$/` to `/^(\/[a-zA-Z0-9-_]+)*$/`

2. Added form error handling for tags in the route edit form by including a `FormMessage` component when no selectors are added

3. Improved UI layout consistency across multiple pages by adding padding:
   - Added `p-4` to header sections in builds, functions, and settings pages
   - Added `p-2` to content containers in the same pages

Author: jog1t

frontend/apps/hub/src/domains/project/forms/route-edit-form.tsx

@@ -57,9 +57,8 @@ export const formSchema = z.object({
 		),
 	path: z
 		.string()
-		.min(1)
 		.refine((value) => {
-			const regex = /^(\/[a-zA-Z0-9-_]+)+$/;
+			const regex = /^(\/[a-zA-Z0-9-_]+)*$/;
 			return regex.test(value);
 		}, "Path must start with a / and contain only alphanumeric characters, dashes, and underscores")
 		.refine((value) => {
@@ -180,7 +179,18 @@ export const Tags = ({
 	return (
 		<>
 			{fields.length === 0 ? (
-				<p className="text-xs mb-2">There's no selectors added.</p>
+				<div>
+					<p className="text-xs mb-2">There's no selectors added.</p>
+					<FormField
+						control={control}
+						name="tags"
+						render={({ field }) => (
+							<FormItem>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</div>
 			) : null}
 			{fields.map((field, index) => (
 				<div

frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actor-versions.tsx

@@ -53,7 +53,7 @@ function ProjectBuildsRoute() {
 
 	return (
 		<>
-			<div className="max-w-5xl mx-auto my-8 flex justify-between items-center">
+			<div className="max-w-5xl mx-auto my-8 flex justify-between items-center p-4">
 				<H1>Builds</H1>
 				<div className="flex items-center gap-2">
 					<TagsSelect
@@ -85,7 +85,7 @@ function ProjectBuildsRoute() {
 			<hr className="mb-4" />
 
 			<div className="p-4">
-				<div className="max-w-5xl mx-auto">
+				<div className="max-w-5xl mx-auto p-2">
 					<div className="border rounded-md">
 						<Table>
 							<TableHeader>

frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/functions.tsx

@@ -71,7 +71,7 @@ function ProjectFunctionsRoute() {
 		<>
 			<Modals />
 
-			<div className="max-w-5xl mx-auto my-8 flex justify-between items-center">
+			<div className="max-w-5xl mx-auto my-8 flex justify-between items-center p-4">
 				<H1>Functions</H1>
 				<div className="flex items-center gap-2">
 					<Button
@@ -96,7 +96,7 @@ function ProjectFunctionsRoute() {
 			<hr className="mb-4" />
 
 			<div className="p-4">
-				<div className="max-w-5xl mx-auto">
+				<div className="max-w-5xl mx-auto p-2">
 					<div className="border rounded-md">
 						<Table>
 							<TableHeader>

frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/settings.tsx

@@ -15,13 +15,13 @@ import { z } from "zod";
 function EnvironmentSettingsRoute() {
 	return (
 		<>
-			<div className="max-w-5xl mx-auto my-8 flex justify-between items-center">
+			<div className="max-w-5xl mx-auto my-8 flex justify-between items-center p-4">
 				<H1>Settings</H1>
 			</div>
 
 			<hr />
 			<div className="p-4">
-				<div className="max-w-5xl mx-auto flex flex-col gap-8">
+				<div className="max-w-5xl mx-auto flex flex-col gap-8 p-2">
 					<ServiceTokenCard />
 					<Modals />
 				</div>