diff --git a/client/components/main/popup.css b/client/components/main/popup.css index 57087eb9a..5c411c8b2 100644 --- a/client/components/main/popup.css +++ b/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: calc(100% + 2.6vw); + 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: 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; } }