Merge pull request #692 from objectstack-ai/copilot/fix-console-layout-issues

Author: hotlong

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

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}

packages/components/src/ui/sidebar.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>

packages/layout/src/AppShell.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"
                 )}
               >

packages/plugin-calendar/src/CalendarView.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,7 +145,7 @@ export function GanttView({
     return cols;
   }, [timelineRange]);
 
-  const taskListWidth = 300;
+  const taskListWidth = getResponsiveTaskListWidth();
 
   const headerRef = React.useRef<HTMLDivElement>(null);
   const listRef = React.useRef<HTMLDivElement>(null);
@@ -170,7 +177,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">

packages/plugin-gantt/src/GanttView.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}

packages/plugin-kanban/src/KanbanImpl.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 } : {})}

packages/plugin-list/src/ListView.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.`}

packages/plugin-map/src/ObjectMap.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"