fix: properly constrain logo size on mobile

- Remove wrapper div from Logo component that was causing size issues
- Use fixed dimensions with Tailwind classes (24x24px on mobile, 60x60px on desktop)
- Fix logo displaying at 264x264px issue

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: light-planck

src/components/icons/logo.tsx

@@ -8,14 +8,12 @@ interface Props {
 
 export const Logo: FC<Props> = ({ width, height, className }) => {
   return (
-    <div className={className}>
-      <img
-        alt="logo icon"
-        src="logo.svg"
-        width={width ?? 100}
-        height={height ?? 100}
-        className="w-full h-full"
-      />
-    </div>
+    <img
+      alt="logo icon"
+      src="logo.svg"
+      width={width ?? 100}
+      height={height ?? 100}
+      className={className}
+    />
   );
 };

src/components/layouts/header/index.tsx

@@ -5,7 +5,9 @@ export const Header = () => {
     <header className="bg-gradient-to-r from-blue-50 to-blue-100 border-b border-blue-200">
       <div className="container mx-auto px-4 py-4 sm:py-6">
         <div className="flex items-center gap-3 sm:gap-4">
-          <Logo width={24} height={24} className="sm:w-[60px] sm:h-[60px]" />
+          <div className="w-6 h-6 sm:w-[60px] sm:h-[60px]">
+            <Logo className="w-full h-full" />
+          </div>
           <div>
             <h1 className="text-xl sm:text-3xl font-bold text-gray-800">
               Time Wizard