Fix date preview in overview graph when moving a milestone

package.json

@@ -1,6 +1,6 @@
 {
   "name": "git4school",
-  "version": "1.5.2",
+  "version": "2.0.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --hmr",

src/app/components/graphs/overview/chart.scss

@@ -190,4 +190,29 @@ body.dark-theme .commit {
       filter: var(--badge-drag-shadow-ready);
     }
   }
+}
+
+.drag-time-indicator {
+  pointer-events: none;
+
+  .indicator-pointer {
+    fill: var(--color-surface);
+    stroke: var(--color-border);
+    stroke-width: 1px;
+  }
+
+  .pill-bg {
+    fill: var(--color-surface);
+    stroke: var(--color-border);
+    stroke-width: 1px;
+    filter: var(--badge-drag-shadow);
+  }
+
+  text {
+    fill: var(--color-text-primary);
+    font-family: var(--font-family-sans);
+    font-size: 11px;
+    font-weight: 600;
+    user-select: none;
+  }
 }

src/app/components/graphs/overview/overview.component.html

@@ -236,7 +236,7 @@ <h5 class="text-muted font-weight-medium mb-1">{{ 'OVERVIEW-GRAPH.NO-COMMITS-TIT
   <div class="chart-container" [style.visibility]="loading ? 'hidden' : 'visible'"></div>
 
   <!-- SKELETON LOADER OVERLAY -->
-  <div *ngIf="loading" class="chart-skeleton-overlay d-flex" style="position: absolute; top: var(--top-inner, 28px); left: 0; right: 0; bottom: 0; width: 100%; z-index: 50; background: var(--color-surface); padding-bottom: 20px; pointer-events: none;">
+  <div *ngIf="loading" class="chart-skeleton-overlay d-flex" style="position: absolute; top: var(--top-inner, 28px); left: 0; right: 0; bottom: 0; width: 100%; z-index: 50; background: var(--color-surface); padding-bottom: var(--bottom-inner, 38px); pointer-events: none;">
       <!-- Y-Axis (Repository names) -->
       <div class="d-flex flex-column" style="width: 15%; min-width: 120px; max-width: 200px; padding-top: 20px;">
           <div *ngFor="let w of [50, 80, 60, 40, 90, 70, 55, 85, 45, 75, 65, 35, 85, 50, 70, 40, 90, 60, 80, 55, 75, 45, 85, 50, 65]" class="d-flex align-items-center justify-content-end pr-3" style="height: 30px;">

src/app/components/graphs/overview/overview.component.scss

@@ -8,7 +8,7 @@
 
 #chart {
   --top-inner: 28px;
-  --bottom-inner: 20px;
+  --bottom-inner: 38px;
 
   &.no-milestones {
     --top-inner: 0px;

src/app/components/graphs/overview/overview.component.ts

@@ -1401,7 +1401,7 @@ export class OverviewComponent
         document.body.style.cursor = "grabbing";
 
         const currentMilestoneX = overview.xScaledTimeZoned(m.date);
-        overview.onMilestoneDragStart(currentMilestoneX, g);
+        overview.onMilestoneDragStart(currentMilestoneX, g, m);
       }, overview.MILESTONE_HOLD_DURATION);
 
       const onWindowMouseMove = (moveEvent: MouseEvent) => {
@@ -1489,7 +1489,8 @@ export class OverviewComponent
 
   private onMilestoneDragStart(
     startX: number,
-    element: d3.Selection<any, any, any, any>
+    element: d3.Selection<any, any, any, any>,
+    m?: Milestone
   ) {
     this.isDraggingMilestone = true;
     this.hasMovedDuringDrag = false;
@@ -1501,6 +1502,9 @@ export class OverviewComponent
     element.raise();
     element.select(".hitbox").attr("style", "cursor: grabbing; pointer-events: all;");
     this.createDragTimeIndicator(startX);
+    if (m) {
+      this.updateDragTimeIndicator(startX, m.date);
+    }
   }
 
   private onMilestoneDragCustom(
@@ -1551,6 +1555,7 @@ export class OverviewComponent
 
     // Triangle pointer
     this.dragTimeIndicator.append("path")
+      .attr("class", "indicator-pointer")
       .attr("d", "M -6 5 L 6 5 L 0 -1 Z")
       .attr("fill", "var(--color-surface)")
       .attr("stroke", "var(--color-border)")
@@ -1567,12 +1572,14 @@ export class OverviewComponent
       .style("fill", "var(--color-surface)")
       .style("stroke", "var(--color-border)")
       .style("stroke-width", "1px")
-      .style("filter", "drop-shadow(0px 2px 4px rgba(0,0,0,0.15))");
+      .style("filter", "var(--badge-drag-shadow)");
 
     this.dragTimeIndicator.append("text")
-      .attr("y", 20)
+      .attr("x", 0)
+      .attr("y", 16)
+      .attr("dominant-baseline", "central")
       .attr("text-anchor", "middle")
-      .style("fill", "var(--color-on-surface)")
+      .style("fill", "var(--color-text-primary)")
       .style("font-size", "11px")
       .style("font-weight", "600")
       .style("pointer-events", "none");
@@ -1587,15 +1594,28 @@ export class OverviewComponent
     const textEl = this.dragTimeIndicator.select("text");
     textEl.text(timeString);
 
-    // Dynamically adjust the pill width
+    // Dynamically adjust the pill width and clamp position to prevent clipping
     const textNode = textEl.node() as SVGTextElement;
     if (textNode) {
       const bbox = textNode.getBBox();
       const padding = 20; // 10px padding on each side
       const width = Math.max(80, bbox.width + padding); // minimum width
+
+      let pillX = -width / 2;
+      const leftMargin = this.width - this.chart_width;
+
+      if (x + pillX + width > this.inner_width) {
+        pillX = this.inner_width - x - width;
+      }
+      if (x + pillX < -leftMargin) {
+        pillX = -leftMargin - x;
+      }
+
       this.dragTimeIndicator.select(".pill-bg")
         .attr("width", width)
-        .attr("x", -width / 2);
+        .attr("x", pillX);
+
+      textEl.attr("x", pillX + width / 2);
     }
   }
 

src/styles/_variables.scss

@@ -16,6 +16,7 @@ $font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Robot
   --color-text-primary: #0f172a;
   --color-text-secondary: #475569;
   --color-text-muted: #94a3b8;
+  --color-on-surface: var(--color-text-primary);
 
   // Cognitive Palette (Flat)
   --color-primary: #2563eb;       // Blue: Calm, focus, primary actions
@@ -82,6 +83,7 @@ body.dark-theme {
   --color-text-primary: #f8fafc;
   --color-text-secondary: #cbd5e1;
   --color-text-muted: #64748b;
+  --color-on-surface: var(--color-text-primary);
 
   // Cognitive Palette adapted for Dark Mode
   --color-primary: #3b82f6;       // Brighter blue for contrast
@@ -140,6 +142,7 @@ $color-border: var(--color-border);
 $color-text-primary: var(--color-text-primary);
 $color-text-secondary: var(--color-text-secondary);
 $color-text-muted: var(--color-text-muted);
+$color-on-surface: var(--color-on-surface);
 
 $color-primary: var(--color-primary);
 $color-primary-hover: var(--color-primary-hover);