tw css

static/css/components/timeline.css

@@ -54,3 +54,33 @@ ol.tw-border-l-2 {
   background: transparent !important;
   color: #6b7280;
 }
+
+/* 4. The Sizing & Expansion Fix */
+li.tw-relative {
+  width: 100% !important; /* Forces the item to take up available space */
+  display: block !important;
+  box-sizing: border-box;
+}
+
+/* Ensure the text content doesn't wrap too early */
+#Tailscaleipdoesntwork p {
+  width: 100%;
+  max-width: 100%;
+  line-height: 1.6 !important; /* Makes the 'small' text feel more readable */
+}
+
+/* Increase the 'hitbox' of the button if it feels too small to click */
+.timeline-button {
+  transform: scale(
+    1.2
+  ); /* Physically makes the dot 20% larger without breaking alignment */
+  box-shadow: 0 0 0 4px white; /* Cleaner 'gap' than a border */
+}
+
+/* 5. Handle Bootstrap's 'Small' Text */
+.tw-text-sm {
+  font-size: 0.875rem !important;
+}
+.tw-text-base {
+  font-size: 1rem !important;
+}

templates/components/timeline.html

@@ -1,6 +1,6 @@
-<div class="tw-mx-auto tw-px-6 tw-py-16">
+<div class="tw-mx-auto tw-px-8 tw-py-16 tw-w-full tw-max-w-4xl">
   <ol
-    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
+    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-8"
   >
     {{ post.timeline | safe }}
   </ol>