fix

FRONTEND/src/components/ModalHistory.tsx

@@ -54,6 +54,7 @@ function ModalHistory({
   const [activeTimePeriod, setActiveTimePeriod] = useState<string>("current");
   const scrollViewportRef = useRef<HTMLDivElement>(null);
   const stationRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  const stationContentRefs = useRef<Map<number, HTMLDivElement>>(new Map());
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
@@ -91,6 +92,7 @@ function ModalHistory({
       setActiveStation("");
       setActiveTimePeriod("current");
       stationRefs.current.clear();
+      stationContentRefs.current.clear();
     }
     
     return () => {
@@ -195,8 +197,24 @@ function ModalHistory({
       : new Map<number, HistoryItem[]>(),
   }));
 
-  // Function to scroll to a specific station
+  // Function to scroll to a specific station (scroll to beginning of content, not header)
   const scrollToStation = (stationId: number) => {
+    // Try to scroll to content first (line group đầu tiên hoặc message)
+    const contentElement = stationContentRefs.current.get(stationId);
+    if (contentElement && scrollViewportRef.current) {
+      const scrollContainer = scrollViewportRef.current;
+      const containerTop = scrollContainer.getBoundingClientRect().top;
+      const elementTop = contentElement.getBoundingClientRect().top;
+      const scrollTop = scrollContainer.scrollTop;
+      
+      scrollContainer.scrollTo({
+        top: scrollTop + elementTop - containerTop - 10, // 10px offset from top
+        behavior: "smooth",
+      });
+      return;
+    }
+    
+    // Fallback: scroll to header if content ref not found
     const stationElement = stationRefs.current.get(stationId);
     if (stationElement && scrollViewportRef.current) {
       const scrollContainer = scrollViewportRef.current;
@@ -427,9 +445,15 @@ function ModalHistory({
                             {station.groupedHistory.size > 0 ? (
                               Array.from(station.groupedHistory.entries())
                                 .sort(([lineA], [lineB]) => lineA - lineB)
-                                .map(([lineNumber, items]) => (
+                                .map(([lineNumber, items], lineIndex) => (
                                 <Box
                                   key={`station-${station.stationId}-line-${lineNumber}`}
+                                  ref={(el) => {
+                                    // Set ref cho line group đầu tiên (nội dung đầu tiên của station)
+                                    if (el && lineIndex === 0) {
+                                      stationContentRefs.current.set(station.stationId, el);
+                                    }
+                                  }}
                                   style={{
                                     marginBottom: "8px",
                                     border: "1px solid #dee2e6",
@@ -522,6 +546,12 @@ function ModalHistory({
                               ))
                             ) : (
                               <Box
+                                ref={(el) => {
+                                  // Set ref cho message "No history" (nội dung đầu tiên của station)
+                                  if (el) {
+                                    stationContentRefs.current.set(station.stationId, el);
+                                  }
+                                }}
                                 style={{
                                   padding: "20px",
                                   textAlign: "center",