Align top bar heights and dark mode borders

Author: ThePyProgrammer

frontend/src/components/layout/Header.jsx

@@ -1077,7 +1077,7 @@ export default function Header() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 bg-white border-b border-slate-200 px-6 py-3 flex items-center gap-4">
+      <header className="sticky top-0 z-10 h-16 shrink-0 bg-white border-b border-slate-200 px-6 flex items-center gap-4">
         {/* Search with live dropdown */}
         <div ref={containerRef} className="flex-1 max-w-xl relative">
           <Icon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px] pointer-events-none" />

frontend/src/components/layout/Sidebar.jsx

@@ -833,7 +833,7 @@ export default function Sidebar({ collapsed, onToggle }) {
       }`}
     >
       {/* Logo + toggle */}
-      <div className={`flex items-center border-b border-white/10 ${collapsed ? 'flex-col gap-2 px-0 py-3' : 'px-4 py-4 justify-between'}`}>
+      <div className={`flex h-16 shrink-0 items-center border-b border-white/10 dark:border-slate-200 ${collapsed ? 'flex-col gap-1 px-0 justify-center' : 'px-4 justify-between'}`}>
         <button
           onClick={() => navigate('/dashboard')}
           className="flex items-center gap-2.5 hover:opacity-80 transition-opacity"
@@ -849,7 +849,7 @@ export default function Sidebar({ collapsed, onToggle }) {
         <button
           onClick={onToggle}
           title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          className="p-1 rounded text-slate-500 hover:text-slate-300 hover:bg-white/5 transition-colors"
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded text-slate-500 hover:text-slate-300 hover:bg-white/5 transition-colors"
         >
           <Icon name={collapsed ? 'chevron_right' : 'chevron_left'} className="text-[18px]" />
         </button>