From 35e72ed6dc39febf31e97c626a722858cc79a78d Mon Sep 17 00:00:00 2001
From: d-kimsuon <dev.kimuson@gmail.com>
Date: Wed, 3 Sep 2025 20:36:13 +0900
Subject: [PATCH] feat: adjust style for mobile

---
 .../components/SessionPageContent.tsx         | 184 +++++++++---------
 .../sessionSidebar/SessionSidebar.tsx         |   5 +-
 2 files changed, 96 insertions(+), 93 deletions(-)

diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
index 7f009f4..7d8f3f7 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
@@ -70,7 +70,7 @@ export const SessionPageContent: FC<{
   }, [conversations, isRunningTask, isPausedTask, previousConversationLength]);
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen max-h-screen">
       <SessionSidebar
         currentSessionId={sessionId}
         projectId={projectId}
@@ -78,100 +78,100 @@ export const SessionPageContent: FC<{
         onMobileOpenChange={setIsMobileSidebarOpen}
       />
 
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col min-h-0">
+        <header className="px-2 sm:px-3 py-3 sticky top-0 z-10 bg-background w-full flex-shrink-0">
+          <div className="flex items-center gap-2 mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="md:hidden"
+              onClick={() => setIsMobileSidebarOpen(true)}
+            >
+              <MenuIcon className="w-4 h-4" />
+            </Button>
+
+            <Button asChild variant="ghost">
+              <Link
+                href={`/projects/${projectId}`}
+                className="flex items-center gap-2"
+              >
+                <ArrowLeftIcon className="w-4 h-4" />
+                <span className="hidden sm:inline">Back to Session List</span>
+                <span className="sm:hidden">Back</span>
+              </Link>
+            </Button>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <h1 className="text-xl sm:text-2xl md:text-3xl font-bold break-words overflow-ellipsis line-clamp-1 px-2 sm:px-5">
+                {session.meta.firstCommand !== null
+                  ? firstCommandToTitle(session.meta.firstCommand)
+                  : sessionId}
+              </h1>
+            </div>
+
+            <div className="px-2 sm:px-5 space-y-1">
+              {project?.project.claudeProjectPath && (
+                <p className="text-sm text-muted-foreground font-mono break-all">
+                  Project:{" "}
+                  {project.project.meta.projectPath ??
+                    project.project.claudeProjectPath}
+                </p>
+              )}
+              <p className="text-sm text-muted-foreground font-mono">
+                Session ID: {sessionId}
+              </p>
+            </div>
+
+            {isRunningTask && (
+              <div className="flex items-center gap-2 p-3 bg-primary/10 border border-primary/20 rounded-lg">
+                <LoaderIcon className="w-4 h-4 animate-spin" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium">
+                    Conversation is in progress...
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    abortTask.mutate(sessionId);
+                  }}
+                >
+                  <XIcon className="w-4 h-4" />
+                  Abort
+                </Button>
+              </div>
+            )}
+
+            {isPausedTask && (
+              <div className="flex items-center gap-2 p-3 bg-primary/10 border border-primary/20 rounded-lg">
+                <PauseIcon className="w-4 h-4" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium">
+                    Conversation is paused...
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    abortTask.mutate(sessionId);
+                  }}
+                >
+                  <XIcon className="w-4 h-4" />
+                  Abort
+                </Button>
+              </div>
+            )}
+          </div>
+        </header>
+
         <div
           ref={scrollContainerRef}
-          className="max-w-none flex-1 overflow-y-auto"
+          className="flex-1 overflow-y-auto min-h-0"
         >
-          <header className="px-2 sm:px-3 py-3 sticky top-0 z-10 bg-background w-full">
-            <div className="flex items-center gap-2 mb-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="md:hidden"
-                onClick={() => setIsMobileSidebarOpen(true)}
-              >
-                <MenuIcon className="w-4 h-4" />
-              </Button>
-
-              <Button asChild variant="ghost">
-                <Link
-                  href={`/projects/${projectId}`}
-                  className="flex items-center gap-2"
-                >
-                  <ArrowLeftIcon className="w-4 h-4" />
-                  <span className="hidden sm:inline">Back to Session List</span>
-                  <span className="sm:hidden">Back</span>
-                </Link>
-              </Button>
-            </div>
-
-            <div className="space-y-3">
-              <div className="flex items-center gap-3">
-                <h1 className="text-xl sm:text-2xl md:text-3xl font-bold break-words overflow-ellipsis line-clamp-1 px-2 sm:px-5">
-                  {session.meta.firstCommand !== null
-                    ? firstCommandToTitle(session.meta.firstCommand)
-                    : sessionId}
-                </h1>
-              </div>
-
-              <div className="px-2 sm:px-5 space-y-1">
-                {project?.project.claudeProjectPath && (
-                  <p className="text-sm text-muted-foreground font-mono break-all">
-                    Project:{" "}
-                    {project.project.meta.projectPath ??
-                      project.project.claudeProjectPath}
-                  </p>
-                )}
-                <p className="text-sm text-muted-foreground font-mono">
-                  Session ID: {sessionId}
-                </p>
-              </div>
-
-              {isRunningTask && (
-                <div className="flex items-center gap-2 p-3 bg-primary/10 border border-primary/20 rounded-lg">
-                  <LoaderIcon className="w-4 h-4 animate-spin" />
-                  <div className="flex-1">
-                    <p className="text-sm font-medium">
-                      Conversation is in progress...
-                    </p>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => {
-                      abortTask.mutate(sessionId);
-                    }}
-                  >
-                    <XIcon className="w-4 h-4" />
-                    Abort
-                  </Button>
-                </div>
-              )}
-
-              {isPausedTask && (
-                <div className="flex items-center gap-2 p-3 bg-primary/10 border border-primary/20 rounded-lg">
-                  <PauseIcon className="w-4 h-4" />
-                  <div className="flex-1">
-                    <p className="text-sm font-medium">
-                      Conversation is paused...
-                    </p>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => {
-                      abortTask.mutate(sessionId);
-                    }}
-                  >
-                    <XIcon className="w-4 h-4" />
-                    Abort
-                  </Button>
-                </div>
-              )}
-            </div>
-          </header>
-
           <main className="w-full px-4 sm:px-8 md:px-12 lg:px-16 xl:px-20 pb-10 relative z-5">
             <ConversationList
               conversations={conversations}
diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
index 94df668..e2deae4 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
@@ -136,7 +136,10 @@ export const SessionSidebar: FC<{
       {/* Mobile sidebar - rendered in dialog */}
       <div className="md:hidden">
         <Dialog open={isMobileOpen} onOpenChange={onMobileOpenChange}>
-          <DialogContent className="p-0 max-w-sm w-full h-[90vh] max-h-[90vh] overflow-hidden flex flex-col">
+          <DialogContent
+            className="p-0 max-w-sm w-full h-[85vh] max-h-[85vh] overflow-hidden flex flex-col top-4 left-[50%] translate-x-[-50%] translate-y-0"
+            showCloseButton={false}
+          >
             <div className="flex-1 overflow-hidden">{sidebarContent}</div>
           </DialogContent>
         </Dialog>