From 1a1584605187ab2a8512970f763b987e13bf49ee Mon Sep 17 00:00:00 2001
From: Ciel <jamie@longest.voyage>
Date: Sat, 19 Jul 2025 12:46:30 +0900
Subject: [PATCH] appview/pages: make spindles page more consistent
Change-Id: xsokunzytullovmyquwwllxpytmlutwp

the /spindles page has some formatting differences between
/settings and /knots. This makes the bounding boxes around segments
consitent as well as header positioning.


Signed-off-by: Ciel <jamie@longest.voyage>
---
 appview/pages/templates/spindles/index.html | 24 +++++++++------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/appview/pages/templates/spindles/index.html b/appview/pages/templates/spindles/index.html
index 3ca97f1..fa50a9d 100644
--- a/appview/pages/templates/spindles/index.html
+++ b/appview/pages/templates/spindles/index.html
@@ -1,21 +1,18 @@
 {{ define "title" }}spindles{{ end }}
 
 {{ define "content" }}
-<div class="px-6 py-4">
-  <h1 class="text-xl font-bold dark:text-white">Spindles</h1>
-</div>
-
-<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
-  <div class="flex flex-col gap-6">
-    {{ block "all" . }} {{ end }}
+  <div class="p-6">
+    <h1 class="text-xl font-bold dark:text-white">Spindles</h1>
+  </div>
+  <div class="flex flex-col">
+    {{ block "list" . }} {{ end }}
     {{ block "register" . }} {{ end }}
   </div>
-</section>
 {{ end }}
 
-{{ define "all" }}
-  <section class="rounded w-full flex flex-col gap-2">
-    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your spindles</h2>
+{{ define "list" }}
+  <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">Your Spindles</h2>
+  <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
     <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
       {{ range $spindle := .Spindles }}
         {{ template "spindles/fragments/spindleListing" . }}
@@ -30,8 +27,8 @@
 {{ end }}
 
 {{ define "register" }}
-  <section class="rounded w-full lg:w-fit flex flex-col gap-2">
-    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a spindle</h2>
+  <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">register a spindle</h2>
+  <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
     <p class="mb-2 dark:text-gray-300">Enter the hostname of your spindle to get started.</p>
     <form
       hx-post="/spindles/register"
@@ -65,6 +62,5 @@
 
       <div id="register-error" class="dark:text-red-400"></div>
     </form>
-
   </section>
 {{ end }}
-- 
2.43.0