Refine ui more

frontend/src/pages/relays/RelayDetail.tsx

@@ -43,7 +43,7 @@ export default function RelayDetail() {
       <Show when={!loading() && relay()}>
         {(loadedRelay) => (
           <div class="mb-6">
-            <h1 class="text-2xl font-bold text-gray-900 py-4">{loadedRelay().name}</h1>
+            <h1 class="text-2xl font-bold text-gray-900 py-2">{loadedRelay().name}</h1>
             <p class="mt-1 text-sm text-gray-500">https://{loadedRelay().subdomain}.spaces.coracle.social</p>
             <Show when={loadedRelay().description.trim()}>
               <p class="mt-3 text-gray-700">{loadedRelay().description}</p>

frontend/src/pages/relays/RelayEdit.tsx

@@ -57,7 +57,7 @@ export default function RelayEdit() {
   return (
     <PageContainer size="narrow">
       <BackLink href={`/relays/${params.id}`} label="Back" />
-      <h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">Edit Relay</h1>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Edit Relay</h1>
 
       <ResourceState
         loading={loading()}

frontend/src/pages/relays/RelayList.tsx

@@ -32,7 +32,7 @@ export default function RelayList() {
   return (
     <PageContainer>
       <div class="flex items-center justify-between mb-6">
-        <h1 class="text-2xl font-bold text-gray-900 py-4">My Relays</h1>
+        <h1 class="text-2xl font-bold text-gray-900 py-2">My Relays</h1>
         <A
           href="/relays/new"
           class="py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"

frontend/src/pages/relays/RelayNew.tsx

@@ -51,7 +51,7 @@ export default function RelayNew() {
 
   return (
     <div class="max-w-2xl mx-auto px-4 py-8">
-      <h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">New Relay</h1>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">New Relay</h1>
       <form onSubmit={handleSubmit} class="space-y-6">
         <div>
           <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>