fix: prevent content area overflow across all view types

[Copilot]

Console content area views (Grid, Kanban, Gantt, Calendar, Map, Timeline) overflow their containers on narrow viewports, obscuring the sidebar and breaking layout. Root cause: the flex chain from SidebarInset → AppShell → ObjectView → PluginObjectView lacks min-w-0, so flex children expand to intrinsic content width rather than respecting parent bounds.

Container chain fixes

• SidebarInset — add min-w-0 overflow-hidden to the flex child wrapping all main content
• AppShell main — add min-w-0
• 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

View-specific fixes

• GanttView — replace hardcoded taskListWidth = 300 with getResponsiveTaskListWidth() (120/200/300px at sm/md/lg breakpoints), matching the existing getResponsiveColumnWidth() pattern
• KanbanImpl — add min-w-0 to both swimlane and flat board containers
• CalendarView — add min-w-0 overflow-hidden, make header flex-wrap with responsive padding
• ObjectMap — wrap all three render paths with cn("min-w-0 overflow-hidden", className)
• ObjectTimeline — add min-w-0
• ListView — add min-w-0 overflow-hidden

Why min-w-0

Flex items default to min-width: auto, which prevents them from shrinking below content size. Adding min-w-0 allows the flex item to shrink into overflow-hidden / overflow-auto containers, keeping scroll regions scoped to each view rather than blowing out the layout.

/* Before: content pushes sidebar off-screen */
.flex-1 { /* implicit min-width: auto */ }
/* After: content respects parent bounds */
.flex-1.min-w-0.overflow-hidden { }

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Console内容区布局溢出与视图宽度响应性系统改进</issue_title>
<issue_description>## 背景与问题
当前 Console 内容区的多视图类型（Grid、Kanban、Gantt、Calendar、Map等）在宽屏/窄屏，特别是手机端经常出现横向/纵向溢出、撑破容器、侧边栏被遮挡、标题区混乱等问题。根因是主内容区域缺少 min-w-0、overflow-hidden 等响应布局处理，同时各视图内部控件宽度硬编码，未考虑容器宽度或可自适应。

主要场景与问题列表

1. Gantt（甘特图）：任务列表固定宽度 + 时间轴横向无限延伸，导致内容溢出、侧边栏被遮挡
2. Kanban（看板）：多列横排，每列 min-width，列数多时横向超出父容器
3. Calendar（日历）：周视图宽度大于容器，手机端横向滚动不友好
4. Map（地图）：容器宽高未响应父层，导致地图视图被布局挤压
5. Timeline：同甘特图，横向延展溢出
6. List/Grid：大量列时横向超出，手机端无法滚动

影响与表现

• 侧边栏与内容区重叠或被挤出屏幕
• 标题、面包屑、工具栏布局混乱
• 内容区无法滚动，或者需要全局滚动导致体验差
• 手机端/Pad端溢出更严重，无法正常查看/编辑

解决方案建议

• 内容区容器 (ObjectView.tsx/PluginObjectView) 增加 min-w-0、overflow-hidden，保证flex子元素不会撑破父容器
• 子视���组件（GanttView、KanbanView、CalendarView、MapView、TimelineView）统一采用响应式宽度，任务区、时间区、列区等都应基于父容器宽度/屏幕尺寸自适应
• 任务列表宽度固定改为比例/最大值自适应
• 横向滚动容器增加 overscroll-x-auto 和 touch 支持，优化移动端体验
• 针对所有视图类型，明确容器布局模式（flex、grid、overflow等），不可使用硬编码宽度
• ToolBar与面包屑、标题等上方区域分隔，避免重叠
• 视图切换/响应式布局时自动调整各区域宽度，保证侧边栏与主视图区不互相遮挡
• 移动端特殊适配，横向滚动区域可自适应，重要操作按钮避免被遮挡

子任务拆分建议

• 检查所有 ObjectView 内容区涉及的布局层级，梳理 min-w-0、overflow-hidden、overflow-x/y 的使用
• 各视图插件内部宽度、横向滚动策略统一整理为响应式逻辑
• 手机端/Pad端测试所有主要视图类型，收集典型溢出、遮挡、滚动不便场景
• 针对卡片、甘特、日历等组件，增加宽度动态计算/横向滚动体验优化
• 优化面包屑/工具栏布局分隔，防止跨区域遮挡

---

如需具体代码方案或视觉设计稿请补充需求。</issue_description>

Comments on the Issue (you are @copilot in this section)

• FixesConsole内容区布局溢出与视图宽度响应性系统改进 #691

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Feb 21, 2026 8:22am
objectui-demo	Ready	Preview, Comment	Feb 21, 2026 8:22am
objectui-storybook	Ready	Preview, Comment	Feb 21, 2026 8:22am

[Copilot]

Pull request overview

Addresses layout overflow in the Console’s main content area by tightening the flex container chain and adding view-level overflow containment so narrow viewports don’t push the sidebar off-screen.

Changes:

• Add min-w-0 / overflow-hidden in key flex containers (AppShell, Console ObjectView wrapper, plugin-view ObjectView, and multiple view plugins) to prevent intrinsic-width overflow.
• Improve responsiveness in view plugins (notably Gantt task list width and Calendar header wrapping).
• Update ROADMAP.md with a dedicated Console layout/responsiveness milestone and checklist.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/plugin-view/src/ObjectView.tsx	Adds min-w-0 overflow-hidden to the root/content containers to prevent flex overflow in plugin ObjectView.
packages/plugin-timeline/src/ObjectTimeline.tsx	Adds min-w-0 to the scroll container to allow shrinking within flex parents.
packages/plugin-map/src/ObjectMap.tsx	Wraps root/loading/error containers with cn('min-w-0 overflow-hidden', className) for consistent overflow containment.
packages/plugin-list/src/ListView.tsx	Adds min-w-0 overflow-hidden to the ListView root container.
packages/plugin-kanban/src/KanbanImpl.tsx	Adds min-w-0 (and overflow-hidden for swimlanes) to better contain horizontal overflow.
packages/plugin-gantt/src/GanttView.tsx	Introduces responsive task list width helper and adds min-w-0 to the root container.
packages/plugin-calendar/src/CalendarView.tsx	Adds min-w-0 overflow-hidden, wraps header, and adjusts responsive spacing/typography.
packages/layout/src/AppShell.tsx	Adds min-w-0 to <main> to prevent the content area from forcing layout overflow.
packages/components/src/ui/sidebar.tsx	Modifies SidebarInset classes (note: this is a Shadcn-synced path).
apps/console/src/components/ObjectView.tsx	Adds min-w-0 overflow-hidden in Console’s ObjectView wrapper chain around PluginObjectView.
ROADMAP.md	Adds a P1.9 section tracking the layout/responsiveness work and follow-ups.

[Copilot]

packages/components/src/ui/* is Shadcn-synced and treated as a no-touch zone in this repo (changes can be overwritten by sync scripts). Please revert this modification and instead apply min-w-0 overflow-hidden via a wrapper in packages/components/src/custom/ or by passing className from the consuming layout(s) (e.g., AppShell, navigation sidebar renderer, CLI generator).

Suggested change

	"relative flex min-w-0 w-full flex-1 flex-col bg-background overflow-hidden",
	"relative flex w-full flex-1 flex-col bg-background",