yet again

static/css/components/timeline.css

@@ -1,24 +1,49 @@
+/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */
+li.tw-list-none {
+  border: none !important;
+  background: transparent !important;
+  padding-left: 0 !important; /* Forces alignment control to the Button */
+  margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */
+}
+
+/* 2. The Precision Dot */
 .timeline-button {
   position: absolute;
-  left: -0.375rem;
+
+  /* MATH: The li has ml-6 (1.5rem). 
+     To center a 0.75rem dot on the line at the edge of that margin:
+     We move it left by (1.5rem + half the dot width). */
+  left: -1.9rem !important;
+  top: 0.25rem;
 
   width: 0.75rem;
   height: 0.75rem;
-
   border-radius: 9999px;
-
   background: #d1d5db;
 
   display: flex;
   align-items: center;
   justify-content: center;
 
-  font-size: 10px;
-  line-height: 1;
-
+  /* This creates the 'gap' around the dot so it looks clean */
+  border: 2px solid white !important;
+  z-index: 10;
   transition: all 0.2s ease;
+  cursor: pointer;
 }
 
+/* 3. Force the Line to be visible and solid */
+ol.tw-border-l-2 {
+  border-left: 2px solid #d1d5db !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+/* Ensure the dot stays put when screen shrinks */
+.tw-relative {
+  position: relative !important;
+}
 /* hover only when expanded */
 .timeline-button:hover:not(.collapsed) {
   background: #6b7280;