From 0c4e84ee5179e1b4cc7d6487f04f87d83c70f4d5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Sep 2024 11:04:16 +0530
Subject: [PATCH] fix: Redirect setting style

---
 .../components/Settings/GlobalRedirects.vue   | 63 ++++++++++---------
 frontend/src/data/routeRedirects.ts           |  2 +-
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalRedirects.vue b/frontend/src/components/Settings/GlobalRedirects.vue
index 56afcee6..533f9c59 100644
--- a/frontend/src/components/Settings/GlobalRedirects.vue
+++ b/frontend/src/components/Settings/GlobalRedirects.vue
@@ -1,41 +1,44 @@
 <template>
-	<div>
-		<div class="flex flex-col justify-between gap-5">
-			<div class="flex flex-col justify-between text-sm">
-				<div class="flex border-b border-outline-gray-1 py-2 text-text-icons-gray-5">
-					<span class="w-1/2">From URL</span>
-					<span class="w-1/2 pl-2">To URL</span>
-				</div>
+	<div class="overflow-hidden">
+		<div class="mb-5">
+			<div class="flex gap-4 px-[2px] py-2">
+				<BuilderInput
+					type="text"
+					v-model="redirectMap.from"
+					:hideClearButton="true"
+					required
+					placeholder="From" />
+				<BuilderInput
+					type="text"
+					v-model="redirectMap.to"
+					:hideClearButton="true"
+					required
+					placeholder="To" />
+			</div>
+			<button
+				class="flex w-fit cursor-pointer items-center gap-2 px-[2px] py-1 text-base text-text-icons-gray-5"
+				@click="addRedirect">
+				<FeatherIcon name="plus" class="size-4" />
+				<span>Add Redirect</span>
+			</button>
+		</div>
+		<div class="h-full overflow-hidden text-sm">
+			<div
+				class="sticky top-0 flex rounded-t-md border-b border-outline-gray-1 bg-surface-gray-1 py-2 text-text-icons-gray-5">
+				<span class="w-1/2 pl-2">From URL</span>
+				<span class="w-1/2 pl-2">To URL</span>
+			</div>
+			<div class="h-[calc(100%-115px)] overflow-y-auto">
 				<div
-					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-base text-text-icons-gray-6 hover:bg-surface-gray-2"
+					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-text-icons-gray-6 hover:bg-surface-gray-2"
 					v-for="row in rows">
-					<span class="w-1/2">{{ row.from }}</span>
-					<span class="ml-3 w-1/2 pl-2">{{ row.to }}</span>
+					<code class="w-1/2 truncate">{{ row.from }}</code>
+					<code class="ml-3 w-1/2 truncate pl-2">{{ row.to }}</code>
 					<FeatherIcon
 						name="trash"
 						class="size-3 cursor-pointer text-text-icons-gray-5"
 						@click="deleteRedirect(row.id)" />
 				</div>
-				<div class="flex gap-4 py-2">
-					<BuilderInput
-						type="text"
-						v-model="redirectMap.from"
-						:hideClearButton="true"
-						required
-						placeholder="From" />
-					<BuilderInput
-						type="text"
-						v-model="redirectMap.to"
-						:hideClearButton="true"
-						required
-						placeholder="To" />
-				</div>
-				<div
-					class="flex cursor-pointer items-center gap-2 py-1 text-base text-text-icons-gray-5"
-					@click="addRedirect">
-					<FeatherIcon name="plus" class="size-4" />
-					<span>Add Redirect</span>
-				</div>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/data/routeRedirects.ts b/frontend/src/data/routeRedirects.ts
index 397af6bd..f1ecbbf3 100644
--- a/frontend/src/data/routeRedirects.ts
+++ b/frontend/src/data/routeRedirects.ts
@@ -5,7 +5,7 @@ const routeRedirects = createListResource({
 	doctype: "Website Route Redirect",
 	parent: "Website Settings",
 	fields: ["source", "target", "redirect_http_status", "name"],
-	orderBy: "modified desc",
+	orderBy: "creation desc",
 	cache: "routeRedirects",
 	start: 0,
 	pageLength: 100,