From d4f13de1d978b271d05e1d67d40e3c1c14761578 Mon Sep 17 00:00:00 2001
From: Lauri Ojansivu <x@xet7.org>
Date: Tue, 14 Oct 2025 11:24:22 +0300
Subject: [PATCH] Try to fix swimlane hamburger menu popup positioning. In
 progress.

Thanks to xet7 !
---
 client/components/cards/labels.css            |  1 +
 client/components/main/popup.css              | 30 ++++++++++++++--
 .../components/swimlanes/swimlaneHeader.jade  | 34 +++++++++++--------
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/client/components/cards/labels.css b/client/components/cards/labels.css
index 45d886191..f4738a879 100644
--- a/client/components/cards/labels.css
+++ b/client/components/cards/labels.css
@@ -38,6 +38,7 @@
 .palette-colors {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-start; /* left-align color chips in wider popovers */
 }
 .palette-colors .palette-color {
   flex-grow: 1;
diff --git a/client/components/main/popup.css b/client/components/main/popup.css
index 0fbdd195a..0dd23cc1a 100644
--- a/client/components/main/popup.css
+++ b/client/components/main/popup.css
@@ -5,7 +5,8 @@
   border-bottom-color: #c2c2c2;
   box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
   position: absolute;
-  width: min(300px, 40vw);
+  /* Wider default to fit full color palette */
+  width: min(380px, 55vw);
   z-index: 99999;
   margin-top: 0.7vh;
 }
@@ -80,10 +81,35 @@
   transition: transform 0.2s;
 }
 .pop-over .content-container .content {
-  width: min(280px, 37vw);
+  /* Match wider popover, leave padding */
+  width: min(360px, 52vw);
   padding: 0 1.3vw 1.3vh;
   float: left;
 }
+
+/* Utility: remove left gutter inside specific popups */
+.pop-over .content .flush-left {
+  margin-left: -1.3vw;
+  padding-left: 0;
+  width: calc(100% + 1.3vw);
+}
+
+/* Swimlane popups: remove left gutter, align content fully left */
+.pop-over .content form.swimlane-color-popup,
+.pop-over .content .swimlane-height-popup {
+  margin-left: -1.3vw;
+  padding-left: 0;
+  width: calc(100% + 1.3vw);
+}
+
+/* Ensure buttons don’t reserve left space; align to flow */
+.pop-over .content form.swimlane-color-popup .primary.confirm,
+.pop-over .content form.swimlane-color-popup .negate.wide.right,
+.pop-over .content .swimlane-height-popup .primary.confirm,
+.pop-over .content .swimlane-height-popup .negate.wide.right {
+  float: none;
+  margin-left: 0;
+}
 .pop-over .content-container .content.no-height {
   height: 2.5vh;
 }
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index d14686163..bc6f91e3b 100644
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/client/components/swimlanes/swimlaneHeader.jade
@@ -89,22 +89,28 @@ template(name="swimlaneAddPopup")
               a.js-swimlane-template {{_ 'template'}}
 
 template(name="setSwimlaneColorPopup")
-  form.edit-label
-    .palette-colors: each colors
-      span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
-        if(isSelected color)
-          i.fa.fa-check
-    button.primary.confirm.js-submit {{_ 'save'}}
-    button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
+  form.edit-label.swimlane-color-popup
+    // Align content to left and remove default gutter
+    .flush-left
+      .palette-colors(style="margin-left:0; padding-left:0; justify-content:flex-start;")
+        each colors
+          span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
+            if(isSelected color)
+              i.fa.fa-check
+    // Buttons aligned left too
+    .flush-left
+      button.primary.confirm.js-submit(style="margin-left:0") {{_ 'save'}}
+      button.js-remove-color.negate.wide.right(style="margin-left:8px") {{_ 'unset-color'}}
 
 template(name="setSwimlaneHeightPopup")
-  #js-swimlane-height-edit
-    label a) {{_ 'set-swimlane-height-value'}}
-    label b) -1
-      p
-        input.swimlane-height-value(type="number" value="{{ swimlaneHeightValue }}" min="100")
-        input.swimlane-height-apply(type="submit" value="{{_ 'apply'}}")
-        input.swimlane-height-error
+  .flush-left.swimlane-height-popup
+    #js-swimlane-height-edit
+      label a) {{_ 'set-swimlane-height-value'}}
+      label b) -1
+        p
+          input.swimlane-height-value(type="number" value="{{ swimlaneHeightValue }}" min="100")
+          input.swimlane-height-apply(type="submit" value="{{_ 'apply'}}")
+          input.swimlane-height-error
 
 template(name="swimlaneHeightErrorPopup")
   .swimlane-height-invalid