From 76398babf70bf4a73322da247800e71d918d4341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jens=20R=C3=B8mer=20Hesselbjerg?= <jh.roemer@gmail.com>
Date: Thu, 2 Oct 2025 12:49:01 +0200
Subject: [PATCH] appview/pages: header and footer occupy full page width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jens Rømer Hesselbjerg <jh.roemer@gmail.com>
---
 appview/pages/templates/layouts/base.html     | 25 ++++++++++---------
 .../templates/layouts/fragments/footer.html   |  4 +--
 .../templates/layouts/fragments/topbar.html   |  2 +-
 3 files changed, 16 insertions(+), 15 deletions(-)
diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index 4fe948f5..de282b87 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -24,10 +24,9 @@
             <title>{{ block "title" . }}{{ end }} · tangled</title>
             {{ block "extrameta" . }}{{ end }}
         </head>
-        <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"
-          style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);">
+        <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
           {{ block "topbarLayout" . }}
-            <header class="px-1 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
+            <header class="w-full bg-white dark:bg-gray-800 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
 
                {{ if .LoggedInUser }}
                 <div id="upgrade-banner"
@@ -41,23 +40,25 @@
           {{ end }}
 
           {{ block "mainLayout" . }}
-            <div class="px-1 col-span-full  md:col-span-1 md:col-start-2 flex flex-col gap-4">
-              {{ block "contentLayout" . }}
-                <main class="col-span-1 md:col-span-8">
+            <div class="flex-grow">
+              <div class="max-w-screen-lg px-4 mx-auto my-6 flex flex-col gap-4">
+                {{ block "contentLayout" . }}
+                <main>
                   {{ block "content" . }}{{ end }}
                 </main>
-              {{ end }}
-  
-              {{ block "contentAfterLayout" . }}
-                <main class="col-span-1 md:col-span-8">
+                {{ end }}
+                
+                {{ block "contentAfterLayout" . }}
+                <main>
                   {{ block "contentAfter" . }}{{ end }}
                 </main>
-              {{ end }}
+                {{ end }}
+              </div>
             </div>
           {{ end }}
 
           {{ block "footerLayout" . }}
-            <footer class="px-1 col-span-full md:col-span-1 md:col-start-2 mt-12">
+            <footer class="bg-white dark:bg-gray-800 mt-12">
               {{ template "layouts/fragments/footer" . }}
             </footer>
           {{ end }}
diff --git a/appview/pages/templates/layouts/fragments/footer.html b/appview/pages/templates/layouts/fragments/footer.html
index dd7ab5eb..94b03923 100644
--- a/appview/pages/templates/layouts/fragments/footer.html
+++ b/appview/pages/templates/layouts/fragments/footer.html
@@ -1,6 +1,6 @@
 {{ define "layouts/fragments/footer" }}
-<div class="w-full p-4 md:p-8 bg-white dark:bg-gray-800 rounded-t drop-shadow-sm">
-  <div class="container mx-auto max-w-7xl px-4">
+<div class="w-full p-8">
+  <div class="max-w-screen-lg mx-auto px-4">
     <div class="flex flex-col lg:flex-row justify-between items-start text-gray-600 dark:text-gray-400 text-sm gap-8">
       <div class="mb-4 md:mb-0">
         <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic no-underline hover:no-underline">
diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 90b6dba9..55cb205b 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -1,5 +1,5 @@
 {{ define "layouts/fragments/topbar" }}
-    <nav class="space-x-4 px-6 py-2 rounded-b bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
+    <nav class="mx-auto space-x-4 px-6 py-2 rounded-b dark:text-white drop-shadow-sm">
         <div class="flex justify-between p-0 items-center">
             <div id="left-items">
               <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">
-- 
2.43.0


