@prmichaelsen/acp-visualizer 0.9.3 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/GitHubInput.tsx

@@ -39,22 +39,22 @@ export function GitHubInput({ onLoad }: GitHubInputProps) {
     <div>
       <div className="flex gap-1">
         <div className="relative flex-1">
-          <Github className="absolute left-2 top-[7px] w-3.5 h-3.5 text-gray-500" />
+          <Github className="absolute left-2 top-2 w-4 h-4 text-gray-500" />
           <input
             type="text"
             value={value}
             onChange={(e) => { setValue(e.target.value); setError(null) }}
             onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
             placeholder="owner/repo"
-            className="w-full bg-gray-900 border border-gray-800 rounded-md pl-7 pr-2 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
+            className="w-full bg-gray-900 border border-gray-800 rounded-md pl-8 pr-2 py-2 text-base text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
           />
         </div>
         <button
           onClick={handleSubmit}
           disabled={loading || !value.trim()}
-          className="px-2 py-1.5 bg-gray-800 border border-gray-700 rounded-md text-xs text-gray-300 hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          className="px-3 py-2 bg-gray-800 border border-gray-700 rounded-md text-sm text-gray-300 hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
         >
-          {loading ? <Loader2 className="w-3 h-3 animate-spin" /> : 'Go'}
+          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Go'}
         </button>
       </div>
       {error && (

package/src/components/Header.tsx

@@ -14,7 +14,7 @@ export function Header({ data }: HeaderProps) {
   if (!data) return null
 
   return (
-    <header className="h-14 border-b border-gray-200 dark:border-gray-800 flex items-center pl-16 lg:pl-6 pr-4 lg:pr-6 gap-2 lg:gap-4 shrink-0 bg-white dark:bg-gray-950">
+    <header className="h-14 border-b border-gray-200 dark:border-gray-800 flex items-center px-4 lg:px-6 gap-2 lg:gap-4 shrink-0 bg-white dark:bg-gray-950">
       <h1 className="text-sm font-medium text-gray-900 dark:text-gray-200 truncate">{data.project.name}</h1>
       <span className="hidden sm:inline text-xs text-gray-500 dark:text-gray-500 font-mono">v{data.project.version}</span>
       <div className="hidden sm:block">

package/src/components/SearchInput.tsx

@@ -9,13 +9,13 @@ interface SearchInputProps {
 export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
   return (
     <div className="relative">
-      <Search className="absolute left-2.5 top-2 w-4 h-4 text-gray-500" />
+      <Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
       <input
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className="w-full bg-gray-900 border border-gray-800 rounded-md pl-8 pr-3 py-1.5 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
+        className="w-full bg-gray-900 border border-gray-800 rounded-md pl-10 pr-3 py-2 text-base text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
       />
     </div>
   )

package/src/components/Sidebar.tsx

@@ -26,7 +26,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
   const location = useRouterState({ select: (s) => s.location })
 
   return (
-    <nav className="w-56 h-full border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0">
+    <nav className="w-full lg:w-56 h-auto max-h-[80vh] lg:h-full border-t lg:border-t-0 lg:border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0 rounded-t-2xl lg:rounded-none overflow-hidden">
       <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
         <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
           ACP Visualizer
@@ -50,7 +50,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           />
         </div>
       )}
-      <div className="flex-1 py-2">
+      <div className="flex-1 py-2 overflow-y-auto">
         {navItems.map((item) => {
           const isActive =
             item.to === '/'
@@ -66,6 +66,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
                   ? 'text-gray-900 dark:text-gray-100 bg-gray-200 dark:bg-gray-800/50'
                   : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-800/30'
               }`}
+              onClick={onClose}
             >
               <item.icon className="w-4 h-4" />
               {item.label}
@@ -77,6 +78,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
         <Link
           to="/search"
           className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 rounded-md hover:text-gray-900 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
+          onClick={onClose}
         >
           <Search className="w-4 h-4" />
           Search...

package/src/routes/__root.tsx

@@ -159,13 +159,17 @@ function RootLayout() {
     <>
       <AutoRefresh />
       <div className="flex h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
-        {/* Mobile Menu Button */}
+        {/* Mobile Menu Button - Bottom Right (Thumb Zone) */}
         <button
-          onClick={() => setMobileMenuOpen(true)}
-          className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg"
-          aria-label="Open menu"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          className="lg:hidden fixed bottom-6 right-6 z-50 p-3 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg transition-transform duration-200"
+          aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
         >
-          <Menu className="w-5 h-5 text-gray-900 dark:text-gray-100" />
+          {mobileMenuOpen ? (
+            <X className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          ) : (
+            <Menu className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          )}
         </button>
 
         {/* Mobile Backdrop */}
@@ -176,10 +180,10 @@ function RootLayout() {
           />
         )}
 
-        {/* Sidebar - Desktop: Always visible | Mobile: Drawer */}
+        {/* Sidebar - Desktop: Always visible | Mobile: Bottom Drawer */}
         <div
-          className={`fixed lg:relative inset-y-0 left-0 z-50 transition-transform duration-300 lg:translate-x-0 ${
-            mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+          className={`fixed lg:relative bottom-0 left-0 right-0 lg:inset-y-0 lg:right-auto z-50 transition-transform duration-300 lg:translate-y-0 ${
+            mobileMenuOpen ? 'translate-y-0' : 'translate-y-full'
           }`}
         >
           <Sidebar