Improve history peak scrolling and hide Ankara MGM observations

frontend/components/dashboard/Dashboard.module.css

@@ -2237,6 +2237,70 @@
   height: 100% !important;
 }
 
+.root :global(.history-modal .history-peak-reference) {
+  margin-top: 18px;
+  padding: 14px 16px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 16px;
+  background: rgba(15, 23, 42, 0.42);
+}
+
+.root :global(.history-modal .history-peak-reference-title) {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.root :global(.history-modal .history-peak-reference-scroll) {
+  display: grid;
+  gap: 8px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding-right: 6px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(96, 165, 250, 0.5) rgba(15, 23, 42, 0.32);
+}
+
+.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar) {
+  width: 8px;
+}
+
+.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-track) {
+  background: rgba(15, 23, 42, 0.32);
+  border-radius: 999px;
+}
+
+.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-thumb) {
+  background: linear-gradient(
+    180deg,
+    rgba(56, 189, 248, 0.72) 0%,
+    rgba(96, 165, 250, 0.52) 100%
+  );
+  border-radius: 999px;
+}
+
+.root :global(.history-modal .history-peak-reference-row) {
+  display: grid;
+  grid-template-columns: minmax(72px, 88px) 1fr;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.root :global(.history-modal .history-peak-reference-date) {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.root :global(.history-modal .history-peak-reference-meta) {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
 @media (max-width: 980px) {
   .root :global(.history-modal .modal-body) {
     padding: 18px;
@@ -2250,6 +2314,10 @@
   .root :global(.history-modal .history-chart-wrapper) {
     height: 360px;
   }
+
+  .root :global(.history-modal .history-peak-reference-scroll) {
+    max-height: 320px;
+  }
 }
 
 @media (max-width: 640px) {
@@ -2291,6 +2359,20 @@
     height: 300px;
     padding: 8px 10px 6px;
   }
+
+  .root :global(.history-modal .history-peak-reference) {
+    padding: 12px;
+  }
+
+  .root :global(.history-modal .history-peak-reference-scroll) {
+    max-height: 260px;
+    padding-right: 2px;
+  }
+
+  .root :global(.history-modal .history-peak-reference-row) {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
 }
 
 /* ── Info Button ── */

frontend/components/dashboard/HistoryModal.tsx

@@ -195,7 +195,6 @@ export function HistoryModal() {
             row.actual_peak_time &&
             row.deb_at_peak_minus_12h != null,
         )
-        .slice(-8)
         .reverse(),
     [summary.recentData],
   );
@@ -319,61 +318,19 @@ export function HistoryModal() {
             </div>
             {!isLoading && !error && <HistoryChart />}
             {!isLoading && !error && settledPeakRows.length > 0 && (
-              <div
+              <div className="history-peak-reference">
-                style={{
+                <div className="history-peak-reference-title">
-                  marginTop: "18px",
-                  padding: "14px 16px",
-                  border: "1px solid rgba(148, 163, 184, 0.14)",
-                  borderRadius: "16px",
-                  background: "rgba(15, 23, 42, 0.42)",
-                }}
-              >
-                <div
-                  style={{
-                    color: "var(--text-primary)",
-                    fontSize: "14px",
-                    fontWeight: 700,
-                    marginBottom: "10px",
-                  }}
-                >
                   {locale === "en-US"
                     ? "Peak-12h DEB Reference (Approx.)"
                     : "峰值前 12 小时 DEB 参考（近似）"}
                 </div>
-                <div
+                <div className="history-peak-reference-scroll">
-                  style={{
-                    display: "grid",
-                    gap: "8px",
-                  }}
-                >
                   {settledPeakRows.map((row) => (
-                    <div
+                    <div key={row.date} className="history-peak-reference-row">
-                      key={row.date}
+                      <div className="history-peak-reference-date">
-                      style={{
-                        display: "grid",
-                        gridTemplateColumns: "minmax(72px, 88px) 1fr",
-                        gap: "10px",
-                        padding: "10px 12px",
-                        borderRadius: "12px",
-                        background: "rgba(255,255,255,0.03)",
-                      }}
-                    >
-                      <div
-                        style={{
-                          color: "var(--text-secondary)",
-                          fontSize: "12px",
-                          fontWeight: 700,
-                        }}
-                      >
                         {row.date}
                       </div>
-                      <div
+                      <div className="history-peak-reference-meta">
-                        style={{
-                          color: "var(--text-secondary)",
-                          fontSize: "12px",
-                          lineHeight: 1.7,
-                        }}
-                      >
                         <div>
                           {locale === "en-US" ? "Peak ref" : "峰值参考"}:{" "}
                           <span style={{ color: "var(--text-primary)" }}>

frontend/lib/dashboard-utils.ts

@@ -182,6 +182,8 @@ export function getHeroMetaItems(detail: CityDetail, locale: Locale = "zh-CN") {
   const current = detail.current || {};
   const parts: string[] = [];
   const sourceTag = getObservationSourceTag(detail);
+  const suppressAnkaraMgmObservation =
+    String(detail.name || "").trim().toLowerCase() === "ankara";
 
   if (current.obs_time) {
     const ageText =
@@ -211,7 +213,7 @@ export function getHeroMetaItems(detail: CityDetail, locale: Locale = "zh-CN") {
     parts.push(`👁️ ${current.visibility_mi}mi`);
   }
 
-  if (detail.mgm?.temp != null) {
+  if (!suppressAnkaraMgmObservation && detail.mgm?.temp != null) {
     const timeMatch = detail.mgm.time?.match(/T?(\d{2}:\d{2})/);
     const timeText = timeMatch ? ` @${timeMatch[1]}` : "";
     parts.push(
@@ -251,6 +253,8 @@ export function getTemperatureChartData(
   const hourly = detail.hourly || {};
   const times = hourly.times || [];
   const temps = hourly.temps || [];
+  const suppressAnkaraMgmObservation =
+    String(detail.name || "").trim().toLowerCase() === "ankara";
 
   if (!times.length) return null;
 
@@ -354,7 +358,11 @@ export function getTemperatureChartData(
   });
 
   const mgmPoints = new Array(times.length).fill(null);
-  if (detail.mgm?.temp != null && detail.mgm?.time) {
+  if (
+    !suppressAnkaraMgmObservation &&
+    detail.mgm?.temp != null &&
+    detail.mgm?.time
+  ) {
     const match = detail.mgm.time.match(/T?(\d{2}):(\d{2})/);
     if (match) {
       let hour = Number.parseInt(match[1], 10);
@@ -543,7 +551,7 @@ export function getTemperatureChartData(
   };
 
   const legendParts: string[] = [];
-  if (detail.mgm?.temp != null) {
+  if (!suppressAnkaraMgmObservation && detail.mgm?.temp != null) {
     legendParts.push(`MGM: ${detail.mgm.temp}${detail.temp_symbol}`);
   }
   if (!hasMgmHourly && debMax != null && omMax != null && Math.abs(offset) > 0.3) {