fix: make sidebar scrollable if list grows too long

3 files changed, 34 insertions, 31 deletions

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 1c501d8..39262d8 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,33 +1,31 @@
 import React from "react";
-import Link from 'next/link';
-
+import Link from "next/link";
 
 const Footer = () => {
-	return (
-		<footer>
-			<div className="text-center mt-4">
-			<Link href="/about">
-			  <p className="font-bold hover:underline text-blue-600 animate-pulse">About</p>
-			</Link>
-				<p className="text-m">
-					Created by Pinapelz <br/>
-					This page is in no way affiliated with Phase Connect or with any of
-					the channels listed here
-					<br />
-					
-				</p>
-				<p className="p-4">
-					<a
-						className="hover:underline text-bold text-blue-600"
-						href="https://github.com/pinapelz/Nijitrack"
-					>
-						Source Code
-					</a>
-					<br />
-				</p>
-			</div>
-		</footer>
-	);
+    return (
+        <footer>
+            <div
+                className="text-center mt-4"
+                style={{ fontFamily: "Quantico, sans-serif" }}
+            >
+                <p className="text-m">
+                    Created by Pinapelz <br />
+                    This page is in no way affiliated with Phase Connect or with
+                    any of the channels listed here
+                    <br />
+                </p>
+                <p className="p-4">
+                    <a
+                        className="hover:underline text-bold text-blue-600"
+                        href="https://github.com/pinapelz/Nijitrack"
+                    >
+                        Source Code
+                    </a>
+                    <br />
+                </p>
+            </div>
+        </footer>
+    );
 };
 
 export default Footer;
diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx
index 766cd3d..6c19e44 100644
--- a/src/components/SubscriberTable/SubscriberTable.tsx
+++ b/src/components/SubscriberTable/SubscriberTable.tsx
@@ -26,7 +26,10 @@ const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => {
 
     return (
         <>
-            <div className="text-center sm:mt-5">
+            <div
+                className="text-center sm:mt-5"
+                style={{ fontFamily: "Quantico, sans-serif" }}
+            >
                 <h1 className="text-2xl font-bold text-gray-800">
                     Subscriber Count
                 </h1>
diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
index c4a65c4..2d5da15 100644
--- a/src/components/TitleBar/TitleBar.tsx
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -122,7 +122,11 @@ const TitleBar: React.FC<TitleBarProps> = ({
                 className={`fixed top-0 left-0 h-screen bg-black text-white shadow-lg transition-transform transform ${
                     isSidebarOpen ? "translate-x-0" : "-translate-x-full"
                 } duration-500 ease-in-out z-50`}
-                style={{ width: "16rem", fontFamily: "Quantico, sans-serif" }}
+                style={{
+                    width: "16rem",
+                    fontFamily: "Quantico, sans-serif",
+                    overflowY: "auto",
+                }}
             >
                 <div className="p-4 text-3xl font-bold border-b border-gray-700">
                     PhaseTracker
@@ -202,8 +206,6 @@ const TitleBar: React.FC<TitleBarProps> = ({
                     )}
                 </ul>
             </div>
-
-            {/* Content overlay when sidebar is open */}
             {isSidebarOpen && (
                 <div
                     className="fixed top-0 left-0 w-full h-full bg-black opacity-50 transition-opacity duration-500"