Skip to content

Commit 1136abe

Browse files
hotlonghotlong
authored
Merge pull request #426 from objectstack-ai/copilot/evaluate-console-ui-experience
2 parents b9f8351 + ded445d commit 1136abe

16 files changed

Lines changed: 107 additions & 102 deletions

‎apps/console/src/App.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -218,14 +218,14 @@ export function AppContent() {
218218
</ErrorBoundary>
219219

220220
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
221-
<DialogContent className="sm:max-w-xl max-h-[90vh] flex flex-col gap-0 p-0 overflow-hidden">
222-
<DialogHeader className="p-6 pb-4 border-b">
223-
<DialogTitle>{editingRecord ? 'Edit' : 'Create'} {currentObjectDef?.label}</DialogTitle>
224-
<DialogDescription>
221+
<DialogContent className="sm:max-w-xl max-h-[90vh] flex flex-col gap-0 p-0 overflow-hidden w-[calc(100vw-2rem)] sm:w-full">
222+
<DialogHeader className="p-4 sm:p-6 pb-3 sm:pb-4 border-b">
223+
<DialogTitle className="text-lg sm:text-xl">{editingRecord ? 'Edit' : 'Create'} {currentObjectDef?.label}</DialogTitle>
224+
<DialogDescription className="text-sm">
225225
{editingRecord ? `Update details for ${currentObjectDef?.label}` : `Add a new ${currentObjectDef?.label} to your database.`}
226226
</DialogDescription>
227227
</DialogHeader>
228-
<div className="flex-1 overflow-y-auto p-6">
228+
<div className="flex-1 overflow-y-auto p-4 sm:p-6">
229229
{currentObjectDef && (
230230
<ObjectForm
231231
key={editingRecord?.id || 'new'}

‎apps/console/src/components/AppHeader.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -76,23 +76,23 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
7676
}
7777

7878
return (
79-
<div className="flex items-center justify-between w-full h-full px-2 md:px-4 gap-2">
80-
<div className="flex items-center gap-2">
79+
<div className="flex items-center justify-between w-full h-full px-2 sm:px-3 md:px-4 gap-1.5 sm:gap-2">
80+
<div className="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
8181
{/* Mobile sidebar trigger */}
82-
<SidebarTrigger className="md:hidden" />
83-
<Separator orientation="vertical" className="h-4 md:hidden" />
82+
<SidebarTrigger className="md:hidden shrink-0" />
83+
<Separator orientation="vertical" className="h-4 md:hidden shrink-0" />
8484

85-
<Breadcrumb className="hidden sm:flex">
85+
<Breadcrumb className="hidden sm:flex min-w-0">
8686
<BreadcrumbList>
8787
{breadcrumbItems.map((item, index) => (
8888
<Fragment key={index}>
8989
{index > 0 && <BreadcrumbSeparator />}
9090
<BreadcrumbItem>
9191
{index === breadcrumbItems.length - 1 || !item.href ? (
92-
<BreadcrumbPage>{item.label}</BreadcrumbPage>
92+
<BreadcrumbPage className="truncate max-w-[200px]">{item.label}</BreadcrumbPage>
9393
) : (
9494
<BreadcrumbLink asChild>
95-
<Link to={item.href}>{item.label}</Link>
95+
<Link to={item.href} className="truncate max-w-[150px]">{item.label}</Link>
9696
</BreadcrumbLink>
9797
)}
9898
</BreadcrumbItem>
@@ -102,12 +102,12 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
102102
</Breadcrumb>
103103

104104
{/* Mobile: Just show current page */}
105-
<span className="text-sm font-medium sm:hidden truncate max-w-37.5">
105+
<span className="text-sm font-medium sm:hidden truncate min-w-0">
106106
{breadcrumbItems[breadcrumbItems.length - 1]?.label || appName}
107107
</span>
108108
</div>
109109

110-
<div className="flex items-center gap-1 md:gap-2">
110+
<div className="flex items-center gap-0.5 sm:gap-1 md:gap-2 shrink-0">
111111
{/* Connection Status */}
112112
{connectionState && <ConnectionStatus state={connectionState} />}
113113

@@ -127,24 +127,26 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
127127
<Button
128128
variant="ghost"
129129
size="icon"
130-
className="lg:hidden h-8 w-8"
130+
className="lg:hidden h-8 w-8 shrink-0"
131131
onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
132132
>
133133
<Search className="h-4 w-4" />
134134
</Button>
135135

136136
{/* Notifications */}
137-
<Button variant="ghost" size="icon" className="h-8 w-8 hidden sm:flex">
137+
<Button variant="ghost" size="icon" className="h-8 w-8 hidden sm:flex shrink-0">
138138
<Bell className="h-4 w-4" />
139139
</Button>
140140

141141
{/* Help */}
142-
<Button variant="ghost" size="icon" className="h-8 w-8 hidden md:flex">
142+
<Button variant="ghost" size="icon" className="h-8 w-8 hidden md:flex shrink-0">
143143
<HelpCircle className="h-4 w-4" />
144144
</Button>
145145

146146
{/* Theme toggle */}
147-
<ModeToggle />
147+
<div className="shrink-0">
148+
<ModeToggle />
149+
</div>
148150
</div>
149151
</div>
150152
);

‎apps/console/src/components/DashboardView.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,20 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
3030

3131
return (
3232
<div className="flex flex-col h-full overflow-hidden bg-background">
33-
<div className="flex justify-between items-center p-6 border-b shrink-0">
34-
<div>
35-
<h1 className="text-2xl font-bold tracking-tight">{dashboard.label || dashboard.name}</h1>
33+
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0">
34+
<div className="min-w-0 flex-1">
35+
<h1 className="text-xl sm:text-2xl font-bold tracking-tight truncate">{dashboard.label || dashboard.name}</h1>
3636
{dashboard.description && (
37-
<p className="text-muted-foreground mt-1">{dashboard.description}</p>
37+
<p className="text-sm text-muted-foreground mt-1 line-clamp-2">{dashboard.description}</p>
3838
)}
3939
</div>
40-
<MetadataToggle open={showDebug} onToggle={toggleDebug} />
40+
<div className="shrink-0">
41+
<MetadataToggle open={showDebug} onToggle={toggleDebug} />
42+
</div>
4143
</div>
4244

4345
<div className="flex-1 overflow-hidden flex flex-row relative">
44-
<div className="flex-1 overflow-auto p-6">
46+
<div className="flex-1 overflow-auto p-4 sm:p-6">
4547
<DashboardRenderer schema={dashboard} dataSource={dataSource} />
4648
</div>
4749

‎apps/console/src/components/ObjectView.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -208,19 +208,19 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
208208
return (
209209
<div className="h-full flex flex-col bg-background">
210210
{/* 1. Main Header */}
211-
<div className="flex justify-between items-center py-3 px-4 border-b shrink-0 bg-background z-10">
212-
<div className="flex items-center gap-3">
213-
<div className="bg-primary/10 p-2 rounded-md shrink-0">
211+
<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">
212+
<div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
213+
<div className="bg-primary/10 p-1.5 sm:p-2 rounded-md shrink-0">
214214
<TableIcon className="h-4 w-4 text-primary" />
215215
</div>
216-
<div>
217-
<h1 className="text-lg font-semibold tracking-tight text-foreground">{objectDef.label}</h1>
216+
<div className="min-w-0">
217+
<h1 className="text-base sm:text-lg font-semibold tracking-tight text-foreground truncate">{objectDef.label}</h1>
218218
</div>
219219
</div>
220220

221-
<div className="flex items-center gap-2">
221+
<div className="flex items-center gap-1.5 sm:gap-2 shrink-0">
222222
<MetadataToggle open={showDebug} onToggle={toggleDebug} className="hidden sm:flex" />
223-
<Button size="sm" onClick={actions.create} className="shadow-none gap-2">
223+
<Button size="sm" onClick={actions.create} className="shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9">
224224
<Plus className="h-4 w-4" />
225225
<span className="hidden sm:inline">New</span>
226226
</Button>
@@ -230,15 +230,15 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
230230
{/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
231231
<div className="flex-1 overflow-hidden relative flex flex-row">
232232
<div className="flex-1 relative h-full">
233-
<div className="absolute inset-0 overflow-auto p-4">
233+
<div className="absolute inset-0 overflow-auto p-3 sm:p-4">
234234
<PluginObjectView
235235
key={refreshKey}
236236
schema={objectViewSchema}
237237
dataSource={dataSource}
238238
views={views}
239239
activeViewId={activeViewId}
240240
onViewChange={handleViewChange}
241-
onEdit={(record) => onEdit?.(record)}
241+
onEdit={(record: any) => onEdit?.(record)}
242242
onRowClick={onRowClick || ((record: any) => onEdit?.(record))}
243243
renderListView={renderListView}
244244
/>
@@ -254,10 +254,10 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
254254
</div>
255255

256256
{/* Drawer for Record Details */}
257-
<Sheet open={!!drawerRecordId} onOpenChange={(open) => !open && handleDrawerClose()}>
258-
<SheetContent side="right" className="w-[85vw] sm:w-150 sm:max-w-none p-0 overflow-hidden">
257+
<Sheet open={!!drawerRecordId} onOpenChange={(open: boolean) => !open && handleDrawerClose()}>
258+
<SheetContent side="right" className="w-[90vw] sm:w-150 sm:max-w-none p-0 overflow-hidden">
259259
{drawerRecordId && (
260-
<div className="h-full bg-background overflow-auto p-4 lg:p-6">
260+
<div className="h-full bg-background overflow-auto p-3 sm:p-4 lg:p-6">
261261
<DetailView
262262
schema={{
263263
type: 'detail-view',

‎apps/console/src/components/PageView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function PageView() {
3535
return (
3636
<div className="flex flex-row h-full w-full overflow-hidden relative">
3737
<div className="flex-1 overflow-auto h-full relative group">
38-
<div className={`absolute top-2 right-2 z-50 transition-opacity ${showDebug ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
38+
<div className={`absolute top-1.5 sm:top-2 right-1.5 sm:right-2 z-50 transition-opacity ${showDebug ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
3939
<MetadataToggle open={showDebug} onToggle={toggleDebug} />
4040
</div>
4141
<SchemaRenderer

‎apps/console/src/components/RecordDetailView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,12 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
5656

5757
return (
5858
<div className="h-full bg-background overflow-hidden flex flex-col relative">
59-
<div className="absolute top-4 right-4 z-50">
59+
<div className="absolute top-2 sm:top-4 right-2 sm:right-4 z-50">
6060
<MetadataToggle open={showDebug} onToggle={toggleDebug} />
6161
</div>
6262

6363
<div className="flex-1 overflow-hidden flex flex-row">
64-
<div className="flex-1 overflow-auto p-4 lg:p-6">
64+
<div className="flex-1 overflow-auto p-3 sm:p-4 lg:p-6">
6565
<DetailView
6666
schema={detailSchema}
6767
dataSource={dataSource}

‎apps/console/src/components/ReportView.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,13 @@ export function ReportView({ dataSource: _dataSource }: { dataSource?: any }) {
4848
if (isEditing) {
4949
return (
5050
<div className="flex flex-col h-full overflow-hidden bg-background">
51-
<div className="flex items-center p-4 border-b bg-muted/10 gap-2">
52-
<Button variant="ghost" size="sm" onClick={() => setIsEditing(false)}>
51+
<div className="flex items-center p-3 sm:p-4 border-b bg-muted/10 gap-2">
52+
<Button variant="ghost" size="sm" onClick={() => setIsEditing(false)} className="shrink-0">
5353
<ChevronLeft className="h-4 w-4 mr-1" />
54-
Back to View
54+
<span className="hidden sm:inline">Back to View</span>
55+
<span className="sm:hidden">Back</span>
5556
</Button>
56-
<div className="font-medium">Edit Report: {reportData.title}</div>
57+
<div className="font-medium truncate">Edit Report: {reportData.title}</div>
5758
</div>
5859
<div className="flex-1 overflow-auto">
5960
<ReportBuilder
@@ -82,23 +83,23 @@ export function ReportView({ dataSource: _dataSource }: { dataSource?: any }) {
8283

8384
return (
8485
<div className="flex flex-col h-full overflow-hidden bg-background">
85-
<div className="flex justify-between items-center p-6 border-b shrink-0 bg-muted/10">
86-
<div>
86+
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0 bg-muted/10">
87+
<div className="min-w-0">
8788
{/* Header is handled by ReportViewer usually, but we can have a page header too */}
88-
<h1 className="text-lg font-medium text-muted-foreground">{reportData.title || 'Report Viewer'}</h1>
89+
<h1 className="text-base sm:text-lg font-medium text-muted-foreground truncate">{reportData.title || 'Report Viewer'}</h1>
8990
</div>
90-
<div className="flex items-center gap-2">
91-
<Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
92-
<PenLine className="h-4 w-4 mr-2" />
93-
Edit Report
91+
<div className="flex items-center gap-2 shrink-0">
92+
<Button variant="outline" size="sm" onClick={() => setIsEditing(true)} className="h-8">
93+
<PenLine className="h-4 w-4 sm:mr-2" />
94+
<span className="hidden sm:inline">Edit Report</span>
9495
</Button>
9596
<MetadataToggle open={showDebug} onToggle={toggleDebug} />
9697
</div>
9798
</div>
9899

99100
<div className="flex-1 overflow-hidden flex flex-row relative">
100-
<div className="flex-1 overflow-auto p-8 bg-muted/5">
101-
<div className="max-w-5xl mx-auto shadow-sm border rounded-xl bg-background overflow-hidden min-h-150">
101+
<div className="flex-1 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5">
102+
<div className="max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150">
102103
<ReportViewer schema={viewerSchema} />
103104
</div>
104105
</div>

‎apps/console/src/pages/ForgotPasswordPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ForgotPasswordForm } from '@object-ui/auth';
66

77
export function ForgotPasswordPage() {
88
return (
9-
<div className="flex min-h-screen items-center justify-center bg-background">
9+
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
1010
<ForgotPasswordForm loginUrl="/login" />
1111
</div>
1212
);

‎apps/console/src/pages/LoginPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function LoginPage() {
99
const navigate = useNavigate();
1010

1111
return (
12-
<div className="flex min-h-screen items-center justify-center bg-background">
12+
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
1313
<LoginForm
1414
onSuccess={() => navigate('/')}
1515
registerUrl="/register"

‎apps/console/src/pages/RegisterPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function RegisterPage() {
99
const navigate = useNavigate();
1010

1111
return (
12-
<div className="flex min-h-screen items-center justify-center bg-background">
12+
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
1313
<RegisterForm
1414
onSuccess={() => navigate('/')}
1515
loginUrl="/login"

0 commit comments

Comments
 (0)