From c00ca14be27024b7f2ca4f4611c5a8384f2a264b Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 14 Apr 2026 20:52:46 +0000
Subject: [PATCH 1/3] Fix long chat names overflowing Project Details on mobile

Add min-w-0 to the flex container wrapping the chat title so that
the existing truncate class on the span can properly constrain the
text. Without min-w-0, flex children ignore overflow constraints and
push the page wider than the viewport on mobile.

Fixes #475

Co-Authored-By: marks <markskram@protonmail.com>
---
 frontend/src/components/ProjectDetailView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProjectDetailView.tsx b/frontend/src/components/ProjectDetailView.tsx
index 12e7f831..70278dd3 100644
--- a/frontend/src/components/ProjectDetailView.tsx
+++ b/frontend/src/components/ProjectDetailView.tsx
@@ -617,7 +617,7 @@ export function ProjectDetailView({ projectId }: ProjectDetailViewProps) {
                                 )}
 
                                 <div className="min-w-0 flex-1 pr-10">
-                                  <div className="flex items-center gap-2">
+                                  <div className="flex min-w-0 items-center gap-2">
                                     <span className="truncate font-medium">
                                       {getConversationTitle(conversation)}
                                     </span>

From 083b97ad6a98641854759b76ff43621a9359cf80 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 14 Apr 2026 21:00:23 +0000
Subject: [PATCH 2/3] Fix overflow at multiple container levels for Project
 Details

- Add overflow-x-hidden to the scrollable area to prevent horizontal scroll
- Add grid-cols-[minmax(0,1fr)] for mobile so grid items are properly
  constrained (matching the existing lg breakpoint pattern)
- Add min-w-0 overflow-hidden to the chats card container

These changes ensure that at every level of the container hierarchy,
content is constrained to the viewport width on mobile.

Co-Authored-By: marks <markskram@protonmail.com>
---
 frontend/src/components/ProjectDetailView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ProjectDetailView.tsx b/frontend/src/components/ProjectDetailView.tsx
index 70278dd3..d8764bf0 100644
--- a/frontend/src/components/ProjectDetailView.tsx
+++ b/frontend/src/components/ProjectDetailView.tsx
@@ -504,7 +504,7 @@ export function ProjectDetailView({ projectId }: ProjectDetailViewProps) {
           </div>
         </div>
 
-        <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
           <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 md:px-8">
             {error ? (
               <Alert variant="destructive">
@@ -517,7 +517,7 @@ export function ProjectDetailView({ projectId }: ProjectDetailViewProps) {
                 Project not found.
               </div>
             ) : project ? (
-              <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
+              <div className="grid grid-cols-[minmax(0,1fr)] gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
                 <div className="contents lg:block lg:space-y-4">
                   <button
                     type="button"
@@ -530,7 +530,7 @@ export function ProjectDetailView({ projectId }: ProjectDetailViewProps) {
                     </span>
                   </button>
 
-                  <div className="order-3 rounded-xl border bg-background/60 lg:order-none">
+                  <div className="order-3 min-w-0 overflow-hidden rounded-xl border bg-background/60 lg:order-none">
                     <div className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3">
                       <h2 className="font-medium">Chats</h2>
                       {isSelectionMode ? (

From 2c91f62ff2eda6c3c7b911fd1d2d362ec4c76217 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 14 Apr 2026 21:05:53 +0000
Subject: [PATCH 3/3] Fix overflow on desktop at narrow widths (lg breakpoint)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add lg:min-w-0 and lg:overflow-hidden to the contents/block wrapper div.
At the lg breakpoint, this element switches from contents to block and
becomes a grid item — without min-w-0, grid items default to
min-width: auto and won't shrink below their content's intrinsic width.

Co-Authored-By: marks <markskram@protonmail.com>
---
 frontend/src/components/ProjectDetailView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProjectDetailView.tsx b/frontend/src/components/ProjectDetailView.tsx
index d8764bf0..db808eaa 100644
--- a/frontend/src/components/ProjectDetailView.tsx
+++ b/frontend/src/components/ProjectDetailView.tsx
@@ -518,7 +518,7 @@ export function ProjectDetailView({ projectId }: ProjectDetailViewProps) {
               </div>
             ) : project ? (
               <div className="grid grid-cols-[minmax(0,1fr)] gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
-                <div className="contents lg:block lg:space-y-4">
+                <div className="contents lg:block lg:min-w-0 lg:overflow-hidden lg:space-y-4">
                   <button
                     type="button"
                     onClick={handleStartNewChat}