update mobile styles

Author: TheMikeMerrill

src/components/Timeline.js

@@ -1,11 +1,30 @@
-import { createMemo, Show, createSignal, onMount } from "solid-js";
+import { createMemo, Show, createSignal, onMount, onCleanup } from "solid-js";
 import { formatTime } from "../util";
 import MarkerDetails from "./MarkerDetails";
 
 export default (props) => {
-  const [isVisible, setIsVisible] = createSignal(true);
+  // Check if we're on a mobile device (width <= 768px)
+  const isMobile = () => window.innerWidth <= 768;
+  
+  // Initialize visibility based on device type
+  const [isVisible, setIsVisible] = createSignal(!isMobile());
   const [isTransitioning, setIsTransitioning] = createSignal(false);
 
+  // Handle window resize
+  const handleResize = () => {
+    if (isMobile()) {
+      setIsVisible(false);
+    }
+  };
+
+  onMount(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+
   const markers = createMemo(() =>
     typeof props.duration === "number" ? props.markers.filter((m) => m[0] < props.duration) : [],
   );

src/less/partials/_player.less

@@ -67,7 +67,7 @@ div.ap-wrapper {
   position: relative;
   background-color: var(--term-color-background);
   color: var(--term-color-foreground);
-  font-family: @monospace;
+  font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace;
   font-size: 15px;
   line-height: 1;
   box-sizing: content-box;
@@ -136,4 +136,9 @@ div.ap-wrapper {
   .fg-8, .fg-9, .fg-10, .fg-11, .fg-12, .fg-13, .fg-14, .fg-15 {
     font-weight: bold;
   }
+
+  // Mobile styles
+  @media (max-width: 768px) {
+    font-size: 13px !important;
+  }
 }

src/less/partials/_timeline.less

@@ -165,6 +165,36 @@
       font-weight: bold;
     }
   }
+
+  // Mobile styles
+  @media (max-width: 768px) {
+    width: 85% !important;
+    max-width: 300px;
+
+    .ap-timeline-header {
+      font-size: 14px;
+      padding: 8px;
+    }
+
+    .ap-marker-details {
+      font-size: 11px;
+      padding: 8px;
+
+      .ap-marker-header h3 {
+        font-size: 13px;
+      }
+
+      .ap-marker-section {
+        h4 {
+          font-size: 11px;
+        }
+
+        code {
+          font-size: 10px;
+        }
+      }
+    }
+  }
 }
 
 @keyframes fadeIn {