@prmichaelsen/acp-visualizer 0.9.3 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "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/routes/__root.tsx

@@ -159,13 +159,13 @@ 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"
+          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"
           aria-label="Open menu"
         >
-          <Menu className="w-5 h-5 text-gray-900 dark:text-gray-100" />
+          <Menu className="w-6 h-6 text-gray-900 dark:text-gray-100" />
         </button>
 
         {/* Mobile Backdrop */}