Fix popups positioning. Part 2.

Thanks to xet7 !

client/components/main/popup.css

@@ -85,21 +85,68 @@
   width: 100%;
   padding: 0 1.3vw 1.3vh;
   box-sizing: border-box;
+  /* Ensure content is not shifted left */
+  margin-left: 0 !important;
+  transform: none !important;
 }
 
 /* Utility: remove left gutter inside specific popups */
 .pop-over .content .flush-left {
-  margin-left: -1.3vw;
+  margin-left: 0;
   padding-left: 0;
-  width: calc(100% + 2.6vw);
+  width: 100%;
 }
 
 /* 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;
+  margin-left: 0;
+  padding-left: 0;
+  width: 100%;
+}
+
+/* Color selection popups: ensure proper alignment */
+.pop-over .content form.swimlane-color-popup .palette-colors,
+.pop-over .content form.edit-label .palette-colors,
+.pop-over .content form.create-label .palette-colors {
+  margin-left: 0;
   padding-left: 0;
-  width: calc(100% + 2.6vw);
+  width: 100%;
+}
+
+/* Color palette items: ensure proper positioning */
+.pop-over .content .palette-colors .palette-color {
+  margin-left: 0;
+  margin-right: 2px;
+  margin-bottom: 2px;
+}
+
+/* Global fix for all popup content to prevent left shifting */
+.pop-over .content * {
+  margin-left: 0 !important;
+  transform: none !important;
+}
+
+/* Override any potential left shifting for specific elements */
+.pop-over .content form,
+.pop-over .content .palette-colors,
+.pop-over .content .pop-over-list,
+.pop-over .content .flush-left {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+  transform: none !important;
+}
+
+/* Fix popup depth containers that cause left shifting */
+.pop-over .popup-container-depth-1,
+.pop-over .popup-container-depth-2,
+.pop-over .popup-container-depth-3,
+.pop-over .popup-container-depth-4,
+.pop-over .popup-container-depth-5,
+.pop-over .popup-container-depth-6 {
+  transform: none !important;
+  margin-left: 0 !important;
+  padding-left: 0 !important;
 }
 
 /* Ensure buttons don’t reserve left space; align to flow */
@@ -130,7 +177,7 @@
 .pop-over .at-form .at-error,
 .pop-over .at-form .at-result {
   padding: 8px 12px;
-  margin: -8px -10px 10px;
+  margin: 0 0 10px 0;
 }
 .pop-over .at-form .at-error {
   background: #ef9a9a;
@@ -174,7 +221,7 @@
   font-weight: 700;
   padding: 1.5px 10px;
   position: relative;
-  margin: 0 -10px;
+  margin: 0;
   text-decoration: none;
   overflow: hidden;
   line-height: 33px;
@@ -333,12 +380,12 @@
     margin: 48px 0px 0px 0px;
   }
   .pop-over .content-container {
-    width: 1000%;
+    width: 100%;
     height: 100%;
     max-height: 100%;
   }
   .pop-over .content-container .content {
-    width: calc(10% - 20px);
+    width: calc(100% - 20px);
     height: calc(100% - 20px);
     padding: 10px;
   }
@@ -360,21 +407,21 @@
     margin: 0px 0px;
   }
   .pop-over .popup-container-depth-1 {
-    transform: translateX(-10%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-2 {
-    transform: translateX(-20%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-3 {
-    transform: translateX(-30%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-4 {
-    transform: translateX(-40%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-5 {
-    transform: translateX(-50%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-6 {
-    transform: translateX(-60%);
+    transform: none !important;
   }
 }