From 6ae74376079bfa431c4dd2c71605593771d049b3 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 22 Dec 2023 15:54:27 +0000
Subject: [PATCH] UX: Make lists fill width of viewport when sidebar is hidden
 (#41)

---
 common/common.scss                            | 25 ++++++++++++++++---
 .../discourse/components/kanban/wrapper.gjs   |  4 +--
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 4a0b115..5b540e6 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -3,13 +3,14 @@ html:has(body.kanban-active) {
 }
 
 .discourse-kanban {
+  position: relative;
   height: 100%;
   --d-sidebar-gap: 2em;
   @media screen and (max-width: 1000px) {
     --d-sidebar-gap: 1em;
   }
 
-  &.fullscreen {
+  &.kanban-fullscreen {
     position: fixed;
     top: 0;
     bottom: 0;
@@ -34,6 +35,25 @@ html:has(body.kanban-active) {
       display: flex;
     }
   }
+
+  // No sidebar. Make container fill the viewport width and center lists
+  body:not(.has-sidebar-page) &:not(.kanban-fullscreen) {
+    width: 100vw;
+    left: calc(-50vw + 50%);
+
+    .discourse-kanban-container {
+      padding: 0 10px;
+    }
+
+    .discourse-kanban-list {
+      &:first-of-type {
+        margin-left: auto;
+      }
+      &:last-of-type {
+        margin-right: auto;
+      }
+    }
+  }
 }
 
 .discourse-kanban-container {
@@ -187,10 +207,7 @@ html:has(body.kanban-active) {
 }
 
 body.kanban-active {
-  overflow: hidden;
-
   #main-outlet {
-    overflow: hidden;
     height: calc(100dvh - var(--header-offset) - 2.5em);
   }
 
diff --git a/javascripts/discourse/components/kanban/wrapper.gjs b/javascripts/discourse/components/kanban/wrapper.gjs
index 0acb845..507713c 100644
--- a/javascripts/discourse/components/kanban/wrapper.gjs
+++ b/javascripts/discourse/components/kanban/wrapper.gjs
@@ -36,7 +36,7 @@ export default class Kanban extends Component {
       <div
         class={{concatClass
           "discourse-kanban"
-          (if this.kanbanManager.fullscreen "fullscreen" "inline")
+          (if this.kanbanManager.fullscreen "kanban-fullscreen" "kanban-inline")
         }}
       >
         {{#if this.kanbanManager.fullscreen}}
@@ -67,8 +67,6 @@ export default class Kanban extends Component {
               />
             </div>
           {{/each}}
-
-          <div class="kanban-spacer"></div>
         </div>
 
         {{bodyClass "kanban-active"}}