From 3d2b71c768eb7aa15cd2baaa80b07dace32d7ae3 Mon Sep 17 00:00:00 2001
From: Tim Howitz <tim.howitz@dyson.com>
Date: Tue, 27 May 2025 13:22:42 +0100
Subject: [PATCH] Fixed sidebar scrolling

---
 src/app/earthquakes/page.tsx   | 13 ++++++-------
 src/app/observatories/page.tsx | 11 +++++------
 src/components/Sidebar.tsx     | 25 ++++++++++---------------
 3 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/app/earthquakes/page.tsx b/src/app/earthquakes/page.tsx
index 7ad43ae..4e8cf30 100644
--- a/src/app/earthquakes/page.tsx
+++ b/src/app/earthquakes/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import useSWR from "swr";
 
 import Map from "@components/Map";
 import Sidebar from "@components/Sidebar";
-import { createPoster, fetcher } from "@utils/axiosHelpers";
+import { createPoster } from "@utils/axiosHelpers";
 import { Earthquake } from "@prismaclient";
 import { getRelativeDate } from "@utils/formatters";
 
@@ -20,7 +20,6 @@ export default function Earthquakes() {
 			data && data.earthquakes
 				? data.earthquakes.map((x: Earthquake) => ({
 						id: x.id,
-						// e.g Earthquake in Germany
 						title: `Earthquake in ${x.code.split("-")[2]}`,
 						magnitude: x.magnitude,
 						longitude: x.longitude,
@@ -32,8 +31,8 @@ export default function Earthquakes() {
 	);
 
 	return (
-		<div className="h-full flex overflow-hidden">
-			<div className="flex-grow">
+		<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
+			<div className="flex-grow h-full">
 				<Map
 					events={earthquakeEvents}
 					selectedEventId={selectedEventId}
@@ -41,7 +40,7 @@ export default function Earthquakes() {
 					hoveredEventId={hoveredEventId}
 					setHoveredEventId={setHoveredEventId}
 					mapType="Earthquakes"
-				></Map>
+				/>
 			</div>
 			<Sidebar
 				logTitle="Log an Earthquake"
@@ -54,7 +53,7 @@ export default function Earthquakes() {
 				setHoveredEventId={setHoveredEventId}
 				button1Name="Log an Earthquake"
 				button2Name="Search Earthquakes"
-			></Sidebar>
+			/>
 		</div>
 	);
 }
diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index f49557d..bf475a3 100644
--- a/src/app/observatories/page.tsx
+++ b/src/app/observatories/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import useSWR from "swr";
 
 import Sidebar from "@/components/Sidebar";
@@ -14,8 +14,8 @@ export default function Observatories() {
 	const { data, error, isLoading } = useSWR("/api/observatories", fetcher);
 
 	return (
-		<div className="h-full flex overflow-hidden">
-			<div className="flex-grow">
+		<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
+			<div className="flex-grow h-full">
 				<Map
 					events={data ? data.observatories : []}
 					selectedEventId={selectedEventId}
@@ -23,7 +23,7 @@ export default function Observatories() {
 					hoveredEventId={hoveredEventId}
 					setHoveredEventId={setHoveredEventId}
 					mapType="observatories"
-				></Map>
+				/>
 			</div>
 			<Sidebar
 				logTitle="Observatory Mapping"
@@ -36,8 +36,7 @@ export default function Observatories() {
 				setHoveredEventId={setHoveredEventId}
 				button1Name="Log a New Observatory"
 				button2Name="Search Observatories"
-			></Sidebar>
-			{/* <SidebarTest></SidebarTest> */}
+			/>
 		</div>
 	);
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 57fbb4b..fdfa802 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -19,13 +19,11 @@ interface SidebarProps {
 }
 
 function MagnitudeNumber({ magnitude }: { magnitude: number }) {
-	// Convert magnitude to string with one decimal place
 	const magnitudeStr = magnitude.toFixed(1);
 	const [whole, decimal] = magnitudeStr.split(".");
 
-	// Define color based on magnitude (0-10 scale)
 	return (
-		<div className={`relative`} style={{ color: getMagnitudeColor(magnitude) }}>
+		<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
 			<TbHexagon size={40} className="drop-shadow-sm" />
 			<div className="absolute inset-0 flex items-center justify-center">
 				<div className="flex items-baseline font-mono font-bold tracking-tight">
@@ -50,14 +48,12 @@ export default function Sidebar({
 	button1Name,
 	button2Name,
 }: SidebarProps) {
-	// todo add buttons 1 and 2 click handlers
 	return (
-		<div className={`flex flex-col h-full w-80 relative bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg`}>
-			<div className="py-6">
+		<div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
+			<div className="py-6 flex flex-col h-full">
 				<div className="px-6 pb-8 border-b border-neutral-200">
-					<h2 className={`text-2xl font-bold text-neutral-800 mb-2`}>{logTitle}</h2>
+					<h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
 					<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
-
 					<Link href="/">
 						<button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
 							{button1Name}
@@ -69,9 +65,10 @@ export default function Sidebar({
 						</button>
 					</Link>
 				</div>
-
-				<div className="flex-1 px-6 pt-6 overflow-y-auto">
-					<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
+				<div className="px-6 pt-6">
+					<h2 className="text-xl font-bold text-neutral-800 mb-2">{recentsTitle}</h2>
+				</div>
+				<div className="flex-1 px-6 overflow-y-auto pt-2">
 					<div className="space-y-3">
 						{events.map((event) => (
 							<button
@@ -86,10 +83,8 @@ export default function Sidebar({
 								onMouseLeave={() => setHoveredEventId("")}
 							>
 								<div className="flex-1">
-									<p className="text-sm font-medium text-neutral-800">{event.title}</p>
-									{/* Uncomment if you want to use text1 */}
-									{/* <p className="text-xs text-neutral-600">{event.text1}</p> */}
-									<p className="text-xs text-neutral-500 mt-1">{event.text2}</p>
+									<p className="text-sm font-medium text-neutral-800 truncate">{event.title}</p>
+									<p className="text-xs text-neutral-500 mt-1 truncate">{event.text2}</p>
 								</div>
 								{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
 							</button>