feat: add mobile layout with chat panel at bottom (#109)

app/page.tsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect, useRef } from "react";
 import { DrawIoEmbed } from "react-drawio";
 import ChatPanel from "@/components/chat-panel";
 import { useDiagram } from "@/contexts/diagram-context";
-import { Monitor } from "lucide-react";
 import {
     ResizablePanelGroup,
     ResizablePanel,
@@ -74,29 +73,13 @@ export default function Home() {
 
     return (
         <div className="h-screen bg-background relative overflow-hidden">
-            {/* Mobile warning overlay */}
+            <ResizablePanelGroup
-            {isMobile && (
+                direction={isMobile ? "vertical" : "horizontal"}
-                <div className="absolute inset-0 z-50 flex items-center justify-center bg-background">
+                className="h-full"
-                    <div className="text-center p-8 max-w-sm mx-auto animate-fade-in">
+            >
-                        <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
-                            <Monitor className="w-8 h-8 text-primary" />
-                        </div>
-                        <h1 className="text-xl font-semibold text-foreground mb-3">
-                            Desktop Required
-                        </h1>
-                        <p className="text-sm text-muted-foreground leading-relaxed">
-                            This application works best on desktop or laptop
-                            devices. Please open it on a larger screen for the
-                            full experience.
-                        </p>
-                    </div>
-                </div>
-            )}
-
-            <ResizablePanelGroup direction="horizontal" className="h-full">
                 {/* Draw.io Canvas */}
-                <ResizablePanel defaultSize={67} minSize={30}>
+                <ResizablePanel defaultSize={isMobile ? 50 : 67} minSize={20}>
-                    <div className="h-full relative p-2">
+                    <div className={`h-full relative ${isMobile ? "p-1" : "p-2"}`}>
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 bg-white">
                             <DrawIoEmbed
                                 key={drawioUi}
@@ -119,15 +102,15 @@ export default function Home() {
                 {/* Chat Panel */}
                 <ResizablePanel
                     ref={chatPanelRef}
-                    defaultSize={33}
+                    defaultSize={isMobile ? 50 : 33}
-                    minSize={15}
+                    minSize={isMobile ? 20 : 15}
-                    maxSize={50}
+                    maxSize={isMobile ? 80 : 50}
-                    collapsible
+                    collapsible={!isMobile}
-                    collapsedSize={3}
+                    collapsedSize={isMobile ? 0 : 3}
                     onCollapse={() => setIsChatVisible(false)}
                     onExpand={() => setIsChatVisible(true)}
                 >
-                    <div className="h-full py-2 pr-2">
+                    <div className={`h-full ${isMobile ? "p-1" : "py-2 pr-2"}`}>
                         <ChatPanel
                             isVisible={isChatVisible}
                             onToggleVisibility={toggleChatPanel}
@@ -137,6 +120,7 @@ export default function Home() {
                                 localStorage.setItem("drawio-theme", newTheme);
                                 setDrawioUi(newTheme);
                             }}
+                            isMobile={isMobile}
                         />
                     </div>
                 </ResizablePanel>

components/chat-panel.tsx

@@ -31,6 +31,7 @@ interface ChatPanelProps {
     onToggleVisibility: () => void;
     drawioUi: "min" | "sketch";
     onToggleDrawioUi: () => void;
+    isMobile?: boolean;
 }
 
 export default function ChatPanel({
@@ -38,6 +39,7 @@ export default function ChatPanel({
     onToggleVisibility,
     drawioUi,
     onToggleDrawioUi,
+    isMobile = false,
 }: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
@@ -410,8 +412,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         );
     };
 
-    // Collapsed view
+    // Collapsed view (desktop only)
-    if (!isVisible) {
+    if (!isVisible && !isMobile) {
         return (
             <div className="h-full flex flex-col items-center pt-4 bg-card border border-border/30 rounded-xl">
                 <ButtonWithTooltip
@@ -445,27 +447,30 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 style={{ position: "absolute" }}
             />
             {/* Header */}
-            <header className="px-5 py-4 border-b border-border/50">
+            <header className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}>
                 <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2">
                         <div className="flex items-center gap-2">
                             <Image
                                 src="/favicon.ico"
                                 alt="Next AI Drawio"
-                                width={28}
+                                width={isMobile ? 24 : 28}
-                                height={28}
+                                height={isMobile ? 24 : 28}
                                 className="rounded"
                             />
-                            <h1 className="text-base font-semibold tracking-tight whitespace-nowrap">
+                            <h1 className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}>
                                 Next AI Drawio
                             </h1>
                         </div>
+                        {!isMobile && (
                             <Link
                                 href="/about"
                                 className="text-sm text-muted-foreground hover:text-foreground transition-colors ml-2"
                             >
                                 About
                             </Link>
+                        )}
+                        {!isMobile && (
                             <ButtonWithTooltip
                                 tooltipContent="Recent generation failures were caused by our AI provider's infrastructure issue, not the app code. After extensive debugging, I've switched providers and observed 6 hours of stability. If issues persist, please report on GitHub."
                                 variant="ghost"
@@ -474,6 +479,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                             >
                                 <CheckCircle className="h-4 w-4" />
                             </ButtonWithTooltip>
+                        )}
                     </div>
                     <div className="flex items-center gap-1">
                         <a
@@ -482,7 +488,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                             rel="noopener noreferrer"
                             className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
                         >
-                            <FaGithub className="w-5 h-5" />
+                            <FaGithub className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`} />
                         </a>
                         {accessCodeRequired && (
                             <ButtonWithTooltip
@@ -492,9 +498,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                                 onClick={() => setShowSettingsDialog(true)}
                                 className="hover:bg-accent"
                             >
-                                <Settings className="h-5 w-5 text-muted-foreground" />
+                                <Settings className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`} />
                             </ButtonWithTooltip>
                         )}
+                        {!isMobile && (
                             <ButtonWithTooltip
                                 tooltipContent="Hide chat panel (Ctrl+B)"
                                 variant="ghost"
@@ -504,6 +511,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                             >
                                 <PanelRightClose className="h-5 w-5 text-muted-foreground" />
                             </ButtonWithTooltip>
+                        )}
                     </div>
                 </div>
             </header>
@@ -521,7 +529,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             </main>
 
             {/* Input */}
-            <footer className="p-4 border-t border-border/50 bg-card/50">
+            <footer className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}>
                 <ChatInput
                     input={input}
                     status={status}