minor design tweaks

Author: yoavf

src/App.jsx

@@ -13,6 +13,7 @@ const algorithms = getAlgorithms();
 
 function App() {
   const [showCredits, setShowCredits] = React.useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = React.useState(false);
 
   return (
     <Router>
@@ -23,8 +24,10 @@ function App() {
             metrics={metrics}
             algorithms={algorithms}
             onShowCredits={() => setShowCredits(true)}
+            isCollapsed={isSidebarCollapsed}
+            onToggleCollapse={setIsSidebarCollapsed}
           />
-          <main className="flex-1 md:ml-64 min-h-screen w-full overflow-x-hidden">
+          <main className={`flex-1 min-h-screen w-full overflow-x-hidden transition-all duration-300 ${isSidebarCollapsed ? 'md:ml-16' : 'md:ml-64'}`}>
             <Routes>
               <Route path="/" element={<LandingPage metrics={metrics} />} />
               <Route path="/metric/:id" element={<MetricDetail metrics={metrics} />} />

src/components/Sidebar.jsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Activity, Github, Info, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
 
-const Sidebar = ({ metrics, algorithms, onShowCredits }) => {
+const Sidebar = ({ metrics, algorithms, onShowCredits, isCollapsed, onToggleCollapse }) => {
     const location = useLocation();
     const [openSection, setOpenSection] = React.useState('algorithms');
-    const [isCollapsed, setIsCollapsed] = React.useState(false);
     const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
 
     // Auto-expand section based on URL
@@ -170,7 +169,7 @@ const Sidebar = ({ metrics, algorithms, onShowCredits }) => {
             <aside className={`hidden md:flex flex-col fixed h-full bg-surface border-r-2 border-black z-10 transition-all duration-300 ${isCollapsed ? 'w-16' : 'w-64'}`}>
                 {/* Collapse/Expand Button */}
                 <button
-                    onClick={() => setIsCollapsed(!isCollapsed)}
+                    onClick={() => onToggleCollapse(!isCollapsed)}
                     className="absolute -right-3 top-24 bg-accent-yellow border-2 border-black p-1 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 transition-all z-20"
                     title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
                 >

src/pages/LandingPage.jsx

@@ -4,10 +4,10 @@ import LogAnalyzer from '../components/LogAnalyzer';
 
 const LandingPage = ({ metrics }) => (
     <div className="animate-in fade-in pt-16 pb-20 px-4 md:px-6 max-w-7xl mx-auto overflow-x-hidden">
-        <header className="mb-20 relative overflow-hidden">
+        <header className="mb-20 relative">
             {/* Decorative Elements */}
             <div className="absolute -top-10 right-0 w-32 h-32 bg-accent-yellow border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rotate-12 hidden md:block"></div>
-            <div className="absolute top-20 -left-10 w-16 h-16 bg-accent-pink border-2 border-black rounded-full shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hidden md:block"></div>
+            <div className="absolute top-2 -left-6 w-12 h-12 bg-accent-pink border-2 border-black rounded-full shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hidden md:block"></div>
 
             <div className="relative z-10 max-w-6xl">
                 <div className="inline-block bg-accent-cyan border-2 border-black px-4 py-2 font-black uppercase tracking-wider text-sm mb-8 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">