Fix horitzontal scroll bar in object detail view caused by progress-bar

Position the `.right` elements with right css property and `.left` with left

Author: sukhwinder33445

library/Icingadb/Widget/Detail/DowntimeCard.php

@@ -100,7 +100,7 @@ protected function assemble()
 
             $scheduledEndBubble = new HtmlElement(
                 'li',
-                null,
+                new Attributes(['class' => 'right']),
                 new HtmlElement(
                     'div',
                     Attributes::create(['class' => ['bubble', 'upwards']]),
@@ -124,18 +124,16 @@ protected function assemble()
                 'width' => sprintf('%F%%', $flexEndLeft - $flexStartLeft)
             ]);
 
-            if (time() > $this->end) {
-                $styleElement
-                    ->addFor($markerEnd, [
-                        'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end))
-                    ])
-                    ->addFor($scheduledEndBubble, [
-                        'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end))
-                    ]);
-            } else {
-                $scheduledEndBubble->getAttributes()
-                    ->add('class', 'right');
-            }
+            $styleElement
+                ->addFor($markerEnd, [
+                    'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end))
+                ])
+                ->addFor($scheduledEndBubble, [
+                    'right' => sprintf(
+                        '%F%%',
+                        100 - ($hPadding + $this->calcRelativeLeft($this->end))
+                    )
+                ]);
 
             $below->add([
                 Html::tag(
@@ -163,8 +161,8 @@ protected function assemble()
             ));
 
             $styleElement
-                ->addFor($aboveStart, ['left' => sprintf('%F%%', $flexStartLeft)])
-                ->addFor($aboveEnd, ['left' => sprintf('%F%%', $flexEndLeft)]);
+                ->addFor($aboveStart, ['right' => sprintf('%F%%', 100 - $flexStartLeft)])
+                ->addFor($aboveEnd, ['right' => sprintf('%F%%', 100 - $flexEndLeft)]);
 
             $above->add([$aboveStart, $aboveEnd, $styleElement]);
         } elseif ($this->downtime->is_flexible) {

public/css/mixin/progress-bar.less

@@ -14,15 +14,15 @@
     }
 
     .below {
-      > .left {
+      > .left { // positions with left property
         position: absolute;
         left: var(--hPadding);
         top: 0;
       }
 
-      > .right {
+      > .right { // positions with right property
         position: absolute;
-        left: ~"calc(var(--hPadding) + var(--duration-scale))";
+        right: ~"calc(100% - calc(var(--hPadding) + var(--duration-scale)))";
         top: 0;
       }
     }
@@ -43,7 +43,7 @@
       width: auto;
       // The wrapper of .bubble is dynamically moved to the left based on the value of the progress bar
       // This moves the center of the bubble to the beginning of the wrapper regardless of the size of the content.
-      transform: translate(-50%, 0);
+      transform: translate(50%, 0);
       z-index: 1;
 
       > * {
@@ -79,8 +79,8 @@
       }
 
       &.right-aligned {
-        // This is (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
-        transform: translate(~"calc(-1.175em - 1px)", 0);
+        // entire width (moves the left border in place of the right) - (.675em (:before placement) + .5em (half :before width)) - 1px (:before border)
+        transform: translate(~"calc(100% - 1.175em - 1px)", 0);
 
         &::before {
           top: auto;
@@ -90,8 +90,8 @@
       }
 
       &.left-aligned {
-        // entire width (moves the right border in place of the left) + (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
-        transform: translate(~"calc(-100% + 1.175em + 1px)", 0);
+        // This is (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
+        transform: translate(~"calc(1.175em + 1px)", 0);
 
         &::before {
           top: auto;
@@ -102,6 +102,10 @@
       }
     }
 
+    .left .bubble {
+      transform: translate(-50%, 0);
+    }
+
     .above .positioned {
       bottom: 0;
     }

public/css/widget/check-statistics.less

@@ -7,7 +7,7 @@
     display: inline-flex;
   }
 
-  .bubble {
+  &.progress-bar .bubble {
     &.top-left-aligned,
     &.top-right-aligned {
       &::before {