From bfdb79be6d01a514cd52b704f5bbc9e2a715abb5 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 15 Sep 2025 10:13:06 +0100
Subject: [PATCH] appview/pages: rework layouts to accomodate sidebar in issue
 view

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/templates/layouts/base.html      |  9 +++++----
 appview/pages/templates/layouts/repobase.html  | 14 ++++++--------
 appview/pages/templates/repo/issues/issue.html | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 12 deletions(-)
diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index 9d0e088e..4fc18a81 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -21,9 +21,10 @@
             <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] md:grid-cols-10 lg:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
+        <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);">
           {{ block "topbarLayout" . }}
-            <header class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3" style="z-index: 20;">
+            <header class="px-1 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
 
                {{ if .LoggedInUser }}
                 <div id="upgrade-banner"
@@ -37,7 +38,7 @@
           {{ end }}
 
           {{ block "mainLayout" . }}
-            <div class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 flex flex-col gap-4">
+            <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">
                   {{ block "content" . }}{{ end }}
@@ -53,7 +54,7 @@
           {{ end }}
 
           {{ block "footerLayout" . }}
-            <footer class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 mt-12">
+            <footer class="px-1 col-span-full md:col-span-1 md:col-start-2 mt-12">
               {{ template "layouts/fragments/footer" . }}
             </footer>
           {{ end }}
diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index 5ec26337..056c64a6 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -41,9 +41,7 @@
       {{ template "repo/fragments/repoDescription" . }}
     </section>
 
-    <section
-        class="w-full flex flex-col"
-    >
+    <section class="w-full flex flex-col" >
         <nav class="w-full pl-4 overflow-auto">
             <div class="flex z-60">
                 {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
@@ -80,11 +78,11 @@
                 {{ end }}
             </div>
         </nav>
-        <section
-            class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white"
-        >
+        {{ block "repoContentLayout" . }}
+          <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
             {{ block "repoContent" . }}{{ end }}
-        </section>
-        {{ block "repoAfter" . }}{{ end }}
+          </section>
+          {{ block "repoAfter" . }}{{ end }}
+        {{ end }}
     </section>
 {{ end }}
diff --git a/appview/pages/templates/repo/issues/issue.html b/appview/pages/templates/repo/issues/issue.html
index 7bd1640a..476a14d6 100644
--- a/appview/pages/templates/repo/issues/issue.html
+++ b/appview/pages/templates/repo/issues/issue.html
@@ -8,6 +8,21 @@
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
 {{ end }}
 
+{{ define "repoContentLayout" }}
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 w-full">
+    <div class="col-span-1 md:col-span-3">
+      <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
+        {{ block "repoContent" . }}{{ end }}
+      </section>
+      {{ block "repoAfter" . }}{{ end }}
+    </div>
+    <div class="col-span-1 flex flex-col gap-6">
+      {{ template "issueLabels" . }}
+      {{ template "issueParticipants" . }}
+    </div>
+  </div>
+{{ end }}
+
 {{ define "repoContent" }}
 <section id="issue-{{ .Issue.IssueId }}">
   {{ template "issueHeader" .Issue }}
-- 
2.51.2

