testing

Author: sukhwinder33445

library/Notifications/Widget/TimeGrid/BaseGrid.php

@@ -429,6 +429,7 @@ final protected function yieldFixedEntries(Traversable $entries): Generator
             if ($entry instanceof FutureEntry) {
                 // (no. of days * - 2) - 1, example: 7 days (week) = -15
                 $colStart = (($this->getNoOfVisuallyConnectedHours() / 24) * - 2) - 1;
+                $colStart = ($this->getNoOfVisuallyConnectedHours() / 24 + 1) * - 1;
                 $colEnd = $gridBorderAt;
             } else {
                 $actualStart = Util::roundToNearestThirtyMinute($entry->getStart());

library/Notifications/Widget/Timeline/FutureEntry.php

@@ -1,29 +1,39 @@
 <?php
 
+/* Icinga Notifications Web | (c) 2025 Icinga GmbH | GPLv2 */
+
 namespace Icinga\Module\Notifications\Widget\Timeline;
 
 use Icinga\Module\Notifications\Widget\TimeGrid\Entry;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
-use ipl\I18n\Translation;
+use ipl\Html\HtmlElement;
 use ipl\Web\Widget\Icon;
 
 class FutureEntry extends Entry
 {
-    use Translation;
-
     public function getColor(int $transparency): string
     {
         return sprintf('~"hsl(%d %d%% 50%% / %d%%)"', 166, 90, $transparency);
     }
 
     protected function assembleContainer(BaseHtmlElement $container): void
     {
-        $this
+        /*$this
             ->addHtml(new Icon('angle-right'))
             ->addAttributes(new Attributes([
                 'class' => 'future',
                 'title' => $this->translate('rotation starts in the future')
-            ]));
+            ]));*/
+
+        $this->addAttributes(new Attributes(['class' => 'future-rotation-container']));
+
+        $container->addHtml(
+            new HtmlElement(
+                'div',
+                Attributes::create(['class' => 'future', 'title' =>  $this->translate('rotation starts in the future')]),
+                new Icon('angle-right')
+            )
+        );
     }
 }

public/css/timeline.less

@@ -59,29 +59,36 @@
         }
       }
 
-      &.future {
+      &.future-rotation-container {
         display: flex;
-        align-items: center;
-        justify-content: center;
-
-        position: relative;
-        padding-left: 6px; // 2px before + 1px border + 2px after + 1px border
-
-        &:before,
-        &:after {
-          content: '';
-          display: block;
-          position: absolute;
-          border: 1px solid var(--entry-border-color);
-          border-right: transparent;
-          height: ~"calc(100% + 2px)"; // border top and bottom
-          width: 100%;
-          left: 2px;
-          .rounded-corners(0.25em);
-        }
-
-        &:after {
-          left: 5px; // 2px before + 1px border + 2px after
+        justify-content: end;
+
+        .future {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          position: relative;
+          padding-left: 6px; // 2px before + 1px border + 2px after + 1px border
+
+          width: 2em;
+
+          &:before,
+          &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            border: 1px solid var(--entry-border-color);
+            border-right: transparent;
+            height: ~"calc(100% + 2px)"; // border top and bottom
+            width: 100%;
+            left: 2px;
+            .rounded-corners(0.25em);
+          }
+
+          &:after {
+            left: 5px; // 2px before + 1px border + 2px after
+          }
         }
       }
     }