Merge pull request #1 from iii123iii/claude/mobile-responsive-ui-tools-36wVT

feat: mobile-responsive UI and fix VisualOrganizer reorder

Author: iii123iii

frontend/src/components/dashboard/Dashboard.tsx

@@ -62,15 +62,15 @@ export default function Dashboard() {
     : toolCategories
 
   return (
-    <div className="max-w-6xl mx-auto px-8 py-8 w-full">
+    <div className="max-w-6xl mx-auto px-4 sm:px-8 py-4 sm:py-8 w-full">
 
       {/* ── Hero upload zone ── */}
       <div
         onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
         onDragLeave={() => setDragging(false)}
         onDrop={(e) => { e.preventDefault(); setDragging(false); uploadAndOpen(e.dataTransfer.files) }}
         onClick={() => { setPendingTool(null); inputRef.current?.click() }}
-        className="mb-8 flex flex-col items-center justify-center gap-3 rounded-xl p-10 cursor-pointer transition-all"
+        className="mb-8 flex flex-col items-center justify-center gap-3 rounded-xl p-6 sm:p-10 cursor-pointer transition-all"
         style={{
           border: `2px dashed ${dragging ? 'var(--color-accent)' : 'var(--color-border)'}`,
           background: dragging ? 'var(--color-accent-muted)' : 'var(--color-surface)',

frontend/src/components/dashboard/MyFiles.tsx

@@ -129,7 +129,7 @@ export default function MyFiles() {
     : files
 
   return (
-    <div className="max-w-5xl mx-auto px-8 py-8 w-full space-y-6">
+    <div className="max-w-5xl mx-auto px-4 sm:px-8 py-4 sm:py-8 w-full space-y-6">
 
       {/* Header */}
       <div className="flex items-center justify-between gap-4">

frontend/src/components/layout/DashboardHeader.tsx

@@ -26,15 +26,15 @@ export default function DashboardHeader() {
 
   return (
     <header
-      className="shrink-0 flex items-center px-5 border-b select-none"
+      className="shrink-0 flex items-center px-4 sm:px-5 border-b select-none"
       style={{
         height: 56,
         background: 'var(--color-surface)',
         borderColor: 'var(--color-border)',
       }}
     >
       {/* ── Logo ── */}
-      <NavLink to="/dashboard" className="flex items-center gap-2.5 mr-8">
+      <NavLink to="/dashboard" className="flex items-center gap-2 sm:gap-2.5 mr-4 sm:mr-8 shrink-0">
         <div
           className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
           style={{ background: 'var(--color-accent)', opacity: 0.9 }}
@@ -56,7 +56,7 @@ export default function DashboardHeader() {
             key={to}
             to={to}
             end={to === '/dashboard'}
-            className="relative h-full flex items-center px-3 text-sm font-medium transition-colors"
+            className="relative h-full flex items-center px-2 sm:px-3 text-xs sm:text-sm font-medium transition-colors"
             style={({ isActive }) => ({
               color: isActive ? 'var(--color-accent)' : 'var(--color-muted)',
             })}
@@ -66,7 +66,7 @@ export default function DashboardHeader() {
                 {label}
                 {isActive && (
                   <span
-                    className="absolute bottom-0 left-3 right-3 h-[2px] rounded-full"
+                    className="absolute bottom-0 left-2 right-2 sm:left-3 sm:right-3 h-[2px] rounded-full"
                     style={{ background: 'var(--color-accent)' }}
                   />
                 )}
@@ -80,7 +80,7 @@ export default function DashboardHeader() {
       <div className="flex-1" />
 
       {/* ── Right controls ── */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1 sm:gap-2">
         {/* Theme toggle */}
         <button
           onClick={toggleTheme}
@@ -103,7 +103,7 @@ export default function DashboardHeader() {
         {isAdmin && (
           <NavLink
             to="/admin"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors"
+            className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors"
             style={{ color: '#f59e0b' }}
             onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(245,158,11,0.1)')}
             onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
@@ -114,17 +114,17 @@ export default function DashboardHeader() {
         )}
 
         {/* Separator */}
-        <div className="w-px h-5" style={{ background: 'var(--color-border)' }} />
+        <div className="hidden sm:block w-px h-5" style={{ background: 'var(--color-border)' }} />
 
         {/* User avatar + email */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5 sm:gap-2">
           <div
             className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold"
             style={{ background: 'var(--color-accent-muted)', color: 'var(--color-accent)' }}
           >
             {initial}
           </div>
-          <span className="text-xs max-w-[140px] truncate" style={{ color: 'var(--color-muted)' }}>
+          <span className="hidden sm:inline text-xs max-w-[120px] truncate" style={{ color: 'var(--color-muted)' }}>
             {userEmail}
           </span>
         </div>