Try to fix swimlane hamburger menu popup positioning. In progress.

Thanks to xet7 !

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;

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;
 }

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