From 5fc10e61e4a710988f68707c3ac46485ddba42a8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 21 Feb 2026 08:01:09 +0000
Subject: [PATCH 1/3] Initial plan


From 19634b01602b04dfee6f992fa06825f8c6ee6490 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 21 Feb 2026 08:12:54 +0000
Subject: [PATCH 2/3] fix: add min-w-0 and overflow-hidden to layout containers
 to prevent content overflow

- SidebarInset: add min-w-0 overflow-hidden to prevent flex children from pushing beyond parent width
- AppShell main: add min-w-0 to prevent flex child overflow
- Console ObjectView: add min-w-0 overflow-hidden to outer and inner content divs
- PluginObjectView: add min-w-0 overflow-hidden to root and content wrapper
- GanttView: make taskListWidth responsive (120px mobile, 200px tablet, 300px desktop)
- KanbanImpl: add min-w-0 to swimlane and flat board containers
- CalendarView: add min-w-0 overflow-hidden to root, responsive header padding/wrapping
- ObjectMap: add min-w-0 overflow-hidden using cn() to all container states
- ObjectTimeline: add min-w-0 to root container
- ListView: add min-w-0 overflow-hidden to root container

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 apps/console/src/components/ObjectView.tsx      | 4 ++--
 packages/components/src/ui/sidebar.tsx          | 2 +-
 packages/layout/src/AppShell.tsx                | 2 +-
 packages/plugin-calendar/src/CalendarView.tsx   | 6 +++---
 packages/plugin-gantt/src/GanttView.tsx         | 5 +++--
 packages/plugin-kanban/src/KanbanImpl.tsx       | 4 ++--
 packages/plugin-list/src/ListView.tsx           | 2 +-
 packages/plugin-map/src/ObjectMap.tsx           | 8 ++++----
 packages/plugin-timeline/src/ObjectTimeline.tsx | 2 +-
 packages/plugin-view/src/ObjectView.tsx         | 4 ++--
 10 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
index b4063e0d0b..e5e96fe2b6 100644
--- a/apps/console/src/components/ObjectView.tsx
+++ b/apps/console/src/components/ObjectView.tsx
@@ -388,7 +388,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
     }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters]);
 
     return (
-        <div className="h-full flex flex-col bg-background">
+        <div className="h-full flex flex-col bg-background min-w-0 overflow-hidden">
              {/* 1. Header with breadcrumb + description */}
              <div className="flex justify-between items-center py-2.5 sm:py-3 px-3 sm:px-4 border-b shrink-0 bg-background z-10">
                  <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
@@ -517,7 +517,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
 
              {/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
              <div className="flex-1 overflow-hidden relative flex flex-row">
-                <div className="flex-1 relative h-full flex flex-col">
+                <div className="flex-1 min-w-0 relative h-full flex flex-col">
                     <div className="flex-1 relative overflow-auto p-3 sm:p-4">
                         <PluginObjectView
                             key={refreshKey}
diff --git a/packages/components/src/ui/sidebar.tsx b/packages/components/src/ui/sidebar.tsx
index 93c0a00e5f..3c43175acc 100644
--- a/packages/components/src/ui/sidebar.tsx
+++ b/packages/components/src/ui/sidebar.tsx
@@ -340,7 +340,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
+        "relative flex min-w-0 w-full flex-1 flex-col bg-background overflow-hidden",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       )}
diff --git a/packages/layout/src/AppShell.tsx b/packages/layout/src/AppShell.tsx
index 624391d1da..103032cdd3 100644
--- a/packages/layout/src/AppShell.tsx
+++ b/packages/layout/src/AppShell.tsx
@@ -140,7 +140,7 @@ export function AppShell({
           <div className="w-px h-4 bg-border mx-1 sm:mx-2" />
           {navbar}
         </header>
-        <main className={cn("flex-1 overflow-auto p-3 sm:p-4 md:p-6", className)}>
+        <main className={cn("flex-1 min-w-0 overflow-auto p-3 sm:p-4 md:p-6", className)}>
           {children}
         </main>
       </SidebarInset>
diff --git a/packages/plugin-calendar/src/CalendarView.tsx b/packages/plugin-calendar/src/CalendarView.tsx
index 3309c34acb..6b8b1edd21 100644
--- a/packages/plugin-calendar/src/CalendarView.tsx
+++ b/packages/plugin-calendar/src/CalendarView.tsx
@@ -237,9 +237,9 @@ function CalendarView({
   }
 
   return (
-    <div role="region" aria-label="Calendar" className={cn("flex flex-col h-full bg-background", className)}>
+    <div role="region" aria-label="Calendar" className={cn("flex flex-col h-full bg-background min-w-0 overflow-hidden", className)}>
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b">
+      <div className="flex flex-wrap items-center justify-between gap-2 p-2 sm:p-4 border-b min-w-0">
         <div className="flex items-center gap-4">
           <div className="flex items-center bg-muted/50 rounded-lg p-1 gap-1">
              <Button variant="ghost" size="sm" onClick={handleToday} className="h-8" aria-label="Go to today">
@@ -272,7 +272,7 @@ function CalendarView({
                 variant="ghost" 
                 aria-label={`Current date: ${getDateLabel()}`}
                 className={cn(
-                  "text-xl font-semibold h-auto px-3 py-1 hover:bg-muted/50 transition-colors",
+                  "text-base sm:text-xl font-semibold h-auto px-2 sm:px-3 py-1 hover:bg-muted/50 transition-colors",
                   "flex items-center gap-2"
                 )}
               >
diff --git a/packages/plugin-gantt/src/GanttView.tsx b/packages/plugin-gantt/src/GanttView.tsx
index 9b55dc6547..9ffb744ad0 100644
--- a/packages/plugin-gantt/src/GanttView.tsx
+++ b/packages/plugin-gantt/src/GanttView.tsx
@@ -138,7 +138,8 @@ export function GanttView({
     return cols;
   }, [timelineRange]);
 
-  const taskListWidth = 300;
+  // Responsive task list width — narrower on small screens
+  const taskListWidth = typeof window !== 'undefined' && window.innerWidth < 640 ? 120 : typeof window !== 'undefined' && window.innerWidth < 1024 ? 200 : 300;
   
   const headerRef = React.useRef<HTMLDivElement>(null);
   const listRef = React.useRef<HTMLDivElement>(null);
@@ -170,7 +171,7 @@ export function GanttView({
   };
 
   return (
-    <div className={cn("flex flex-col h-full bg-background border rounded-lg overflow-hidden", className)}>
+    <div className={cn("flex flex-col h-full bg-background border rounded-lg overflow-hidden min-w-0", className)}>
       {/* Toolbar */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 p-2 border-b bg-card">
         <div className="flex items-center gap-2">
diff --git a/packages/plugin-kanban/src/KanbanImpl.tsx b/packages/plugin-kanban/src/KanbanImpl.tsx
index 5f1a821909..eb1622e6ce 100644
--- a/packages/plugin-kanban/src/KanbanImpl.tsx
+++ b/packages/plugin-kanban/src/KanbanImpl.tsx
@@ -515,7 +515,7 @@ function KanbanBoardInner({ columns, onCardMove, onCardClick, className, dnd, qu
 
       {swimlanes ? (
         /* Swimlane (2D) layout */
-        <div className={cn("flex flex-col gap-1 p-2 sm:p-4", className)} role="region" aria-label="Kanban board with swimlanes">
+        <div className={cn("flex flex-col gap-1 p-2 sm:p-4 min-w-0 overflow-hidden", className)} role="region" aria-label="Kanban board with swimlanes">
           {/* Column headers */}
           <div className="flex gap-3 sm:gap-4 pl-36 sm:pl-44 overflow-x-auto">
             {boardColumns.map(col => (
@@ -572,7 +572,7 @@ function KanbanBoardInner({ columns, onCardMove, onCardClick, className, dnd, qu
         </div>
       ) : (
         /* Standard flat layout */
-        <div className={cn("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 bg-muted/10 rounded-lg [-webkit-overflow-scrolling:touch]", className)} role="region" aria-label="Kanban board">
+        <div className={cn("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 bg-muted/10 rounded-lg [-webkit-overflow-scrolling:touch] min-w-0", className)} role="region" aria-label="Kanban board">
           {boardColumns.map((column) => (
             <KanbanColumnView
               key={column.id}
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
index 748e82790f..5324ed5115 100644
--- a/packages/plugin-list/src/ListView.tsx
+++ b/packages/plugin-list/src/ListView.tsx
@@ -785,7 +785,7 @@ export const ListView: React.FC<ListViewProps> = ({
   return (
     <div
       ref={pullRef}
-      className={cn('flex flex-col h-full bg-background relative', className)}
+      className={cn('flex flex-col h-full bg-background relative min-w-0 overflow-hidden', className)}
       {...(schema.aria?.label ? { 'aria-label': schema.aria.label } : {})}
       {...(schema.aria?.describedBy ? { 'aria-describedby': schema.aria.describedBy } : {})}
       {...(schema.aria?.live ? { 'aria-live': schema.aria.live } : {})}
diff --git a/packages/plugin-map/src/ObjectMap.tsx b/packages/plugin-map/src/ObjectMap.tsx
index af0d38e46c..86c11bffb1 100644
--- a/packages/plugin-map/src/ObjectMap.tsx
+++ b/packages/plugin-map/src/ObjectMap.tsx
@@ -23,7 +23,7 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData } from '@object-ui/types';
 import { useNavigationOverlay } from '@object-ui/react';
-import { NavigationOverlay } from '@object-ui/components';
+import { NavigationOverlay, cn } from '@object-ui/components';
 import { z } from 'zod';
 import MapGL, { NavigationControl, Marker, Popup } from 'react-map-gl/maplibre';
 import maplibregl from 'maplibre-gl';
@@ -501,7 +501,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
 
   if (loading) {
     return (
-      <div className={className}>
+      <div className={cn("min-w-0 overflow-hidden", className)}>
         <div className="flex items-center justify-center h-96 bg-muted rounded-lg border">
           <div className="text-muted-foreground">Loading map...</div>
         </div>
@@ -511,7 +511,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
 
   if (error) {
     return (
-      <div className={className}>
+      <div className={cn("min-w-0 overflow-hidden", className)}>
         <div className="flex items-center justify-center h-96 bg-muted rounded-lg border">
           <div className="text-destructive">Error: {error.message}</div>
         </div>
@@ -520,7 +520,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   }
 
   return (
-    <div className={className}>
+    <div className={cn("min-w-0 overflow-hidden", className)}>
       {invalidCount > 0 && (
         <div className="mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded">
           {`${invalidCount} record${invalidCount !== 1 ? 's' : ''} with missing or invalid coordinates excluded from the map.`}
diff --git a/packages/plugin-timeline/src/ObjectTimeline.tsx b/packages/plugin-timeline/src/ObjectTimeline.tsx
index ea911f0420..f672cc0fe4 100644
--- a/packages/plugin-timeline/src/ObjectTimeline.tsx
+++ b/packages/plugin-timeline/src/ObjectTimeline.tsx
@@ -185,7 +185,7 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   }
 
   return (
-    <div ref={pullRef} className="relative overflow-auto h-full">
+    <div ref={pullRef} className="relative overflow-auto h-full min-w-0">
       {pullDistance > 0 && (
         <div
           className="flex items-center justify-center text-xs text-muted-foreground"
diff --git a/packages/plugin-view/src/ObjectView.tsx b/packages/plugin-view/src/ObjectView.tsx
index 3855bb31d3..3fe1b4be4e 100644
--- a/packages/plugin-view/src/ObjectView.tsx
+++ b/packages/plugin-view/src/ObjectView.tsx
@@ -914,7 +914,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     : layout;
 
   return (
-    <div className={cn('flex flex-col h-full', className)}>
+    <div className={cn('flex flex-col h-full min-w-0 overflow-hidden', className)}>
       {/* Title and description */}
       {(schema.title || schema.description) && (
         <div className="mb-4 shrink-0">
@@ -933,7 +933,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       </div>
 
       {/* Content */}
-      <div className="flex-1 min-h-0">
+      <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
         {renderContent()}
       </div>
 

From a3d4e20763637f3b146543ffc04f4c3565819aa6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 21 Feb 2026 08:14:34 +0000
Subject: [PATCH 3/3] refactor: extract getResponsiveTaskListWidth helper for
 GanttView task list width

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 ROADMAP.md                              | 12 ++++++++++++
 packages/plugin-gantt/src/GanttView.tsx | 10 ++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 40f7091734..f5a63302d6 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -132,6 +132,18 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] i18n for all 11 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
 - [ ] Conditional formatting rules
 
+### P1.9 Console — Content Area Layout & Responsiveness
+
+- [x] Add `min-w-0` / `overflow-hidden` to flex layout chain (SidebarInset → AppShell → ObjectView → PluginObjectView) to prevent content overflow
+- [x] Fix Gantt task list width — responsive sizing (120px mobile, 200px tablet, 300px desktop) instead of hardcoded 300px
+- [x] Fix Kanban board overflow containment (`min-w-0` on swimlane and flat containers)
+- [x] Fix Calendar header responsive wrapping and date label sizing
+- [x] Fix Map container overflow containment via `cn()` merge
+- [x] Fix Timeline container `min-w-0` to prevent overflow
+- [x] Fix ListView container `min-w-0 overflow-hidden` to prevent overflow
+- [ ] Mobile/tablet end-to-end testing for all view types
+- [ ] Dynamic width calculation for Gantt task list and Kanban columns based on container width
+
 ---
 
 ## 🧩 P2 — Polish & Advanced Features
diff --git a/packages/plugin-gantt/src/GanttView.tsx b/packages/plugin-gantt/src/GanttView.tsx
index 9ffb744ad0..4d8edcea76 100644
--- a/packages/plugin-gantt/src/GanttView.tsx
+++ b/packages/plugin-gantt/src/GanttView.tsx
@@ -39,6 +39,13 @@ function getResponsiveColumnWidth() {
   return 60;
 }
 
+function getResponsiveTaskListWidth() {
+  const w = typeof window !== 'undefined' ? window.innerWidth : 1024;
+  if (w < 640) return 120;
+  if (w < 1024) return 200;
+  return 300;
+}
+
 export interface GanttTask {
   id: string | number
   title: string
@@ -138,8 +145,7 @@ export function GanttView({
     return cols;
   }, [timelineRange]);
 
-  // Responsive task list width — narrower on small screens
-  const taskListWidth = typeof window !== 'undefined' && window.innerWidth < 640 ? 120 : typeof window !== 'undefined' && window.innerWidth < 1024 ? 200 : 300;
+  const taskListWidth = getResponsiveTaskListWidth();
   
   const headerRef = React.useRef<HTMLDivElement>(null);
   const listRef = React.useRef<HTMLDivElement>(null);