Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-24 15:22:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve mobile responsive layouts

Browse Source
This commit is contained in:
Amruth Pillai
2026-07-04 23:54:02 +02:00
parent 3f6e22addb
commit 8416a92153
7 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/agent/$threadId.tsx
+8 -8
View File
@@ -262,7 +262,7 @@ function RouteComponent() {
: null;
return (
<div className="h-svh bg-background">
<div className="h-svh min-w-0 overflow-hidden bg-background">
<div className="hidden h-full lg:block">
<ResizableGroup orientation="horizontal" className="h-full">
<ResizablePanel
@@ -309,8 +309,8 @@ function RouteComponent() {
</ResizableGroup>
</div>
<div className="flex h-full flex-col lg:hidden">
<div className="border-b p-2">
<div className="flex h-full min-w-0 flex-col lg:hidden">
<div className="shrink-0 border-b p-2">
<Tabs value={mobileTab} onValueChange={setMobileTab}>
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="threads">
@@ -328,11 +328,11 @@ function RouteComponent() {
</TabsList>
</Tabs>
</div>
<div className="min-h-0 flex-1">
<div className={cn("h-full", mobileTab !== "threads" && "hidden")}>
<AgentThreadSidebar activeThreadId={threadId} />
<div className="min-h-0 min-w-0 flex-1 overflow-hidden">
<div className={cn("h-full min-w-0", mobileTab !== "threads" && "hidden")}>
<AgentThreadSidebar activeThreadId={threadId} className="border-e-0" />
</div>
<div className={cn("h-full", mobileTab !== "chat" && "hidden")}>
<div className={cn("h-full min-w-0", mobileTab !== "chat" && "hidden")}>
<AgentChat
threadId={threadId}
initialMessages={data.messages}
@@ -343,7 +343,7 @@ function RouteComponent() {
actions={data.actions}
/>
</div>
<div className={cn("h-full", mobileTab !== "resume" && "hidden")}>
<div className={cn("h-full min-w-0", mobileTab !== "resume" && "hidden")}>
<ResumePane resume={data.resume} />
</div>
</div>
apps/web/src/routes/agent/index.tsx
+4 -4
View File
@@ -10,12 +10,12 @@ export const Route = createFileRoute("/agent/")({
function RouteComponent() {
return (
<div className="flex h-svh bg-background">
<div className="w-72 shrink-0">
<AgentThreadSidebar />
<div className="flex h-svh min-w-0 flex-col overflow-hidden bg-background lg:flex-row">
<div className="h-72 min-h-0 shrink-0 lg:h-auto lg:w-72">
<AgentThreadSidebar className="border-e-0 border-b lg:border-e lg:border-b-0" />
</div>
<main className="grid min-w-0 flex-1 place-items-center p-6">
<main className="grid min-h-0 min-w-0 flex-1 place-items-center overflow-auto p-4 sm:p-6">
<div className="w-full max-w-xl rounded-md border bg-card p-6 shadow-sm">
<div className="flex items-start gap-4">
<div className="grid size-11 shrink-0 place-items-center rounded-md border bg-background">
apps/web/src/routes/agent/new.tsx
+3 -3
View File
@@ -14,9 +14,9 @@ function RouteComponent() {
const { resumeId } = Route.useSearch();
return (
<div className="flex h-svh bg-background">
<div className="w-72 shrink-0">
<AgentThreadSidebar />
<div className="flex h-svh min-w-0 flex-col overflow-hidden bg-background lg:flex-row">
<div className="h-72 min-h-0 shrink-0 lg:h-auto lg:w-72">
<AgentThreadSidebar className="border-e-0 border-b lg:border-e lg:border-b-0" />
</div>
<main className="grid min-w-0 flex-1 overflow-auto">