From 30e48e3aaa32a9554524fc9c7d04253f1afd8d7f Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Mon, 19 Jan 2026 00:28:42 -0800
Subject: [PATCH] Add panel size constraints and size properties to board
 types.

- Add MIN_ROW_HEIGHT, MAX_ROW_HEIGHT, MIN_COLUMN_WIDTH, BUTTON_ROW_HEIGHT constants
- Apply minSize/maxSize constraints to row and column panels
- Add size property to BoardColumn and BoardRow types for future persistence
- Add optional chaining for safer property access

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/(main)/boards/[boardId]/BoardBody.tsx | 21 +++++++++++--------
 src/lib/types.ts                              |  2 ++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/(main)/boards/[boardId]/BoardBody.tsx b/src/app/(main)/boards/[boardId]/BoardBody.tsx
index 75fa780c..43921963 100644
--- a/src/app/(main)/boards/[boardId]/BoardBody.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardBody.tsx
@@ -14,7 +14,10 @@ const CATALOG = {
   },
 };
 
-const MIN_HEIGHT = 300;
+const MIN_ROW_HEIGHT = 300;
+const MAX_ROW_HEIGHT = 600;
+const MIN_COLUMN_WIDTH = 300;
+const BUTTON_ROW_HEIGHT = 60;
 const MAX_COLUMNS = 4;
 
 export function BoardBody() {
@@ -76,27 +79,27 @@ export function BoardBody() {
   };
 
   const rows = board?.parameters?.rows ?? [];
-  const minHeight = (rows.length + 1) * MIN_HEIGHT;
+  const minHeight = (rows?.length || 1) * MAX_ROW_HEIGHT + BUTTON_ROW_HEIGHT;
 
   return (
     <Group orientation="vertical" style={{ minHeight }}>
       {rows.map((row, index) => (
         <Fragment key={row.id}>
-          <Panel minSize={MIN_HEIGHT}>
+          <Panel minSize={MIN_ROW_HEIGHT} maxSize={MAX_ROW_HEIGHT}>
             <BoardRow
               {...row}
               rowId={row.id}
               rowIndex={index}
-              rowCount={rows.length}
+              rowCount={rows?.length}
               onRemove={handleRemoveRow}
               onMoveUp={handleMoveRowUp}
               onMoveDown={handleMoveRowDown}
             />
           </Panel>
-          {index < rows.length - 1 && <Separator />}
+          {index < rows?.length - 1 && <Separator />}
         </Fragment>
       ))}
-      <Panel>
+      <Panel minSize={BUTTON_ROW_HEIGHT}>
         <Row padding="3">
           <TooltipTrigger delay={0}>
             <Button variant="outline" onPress={handleAddRow}>
@@ -160,10 +163,10 @@ function BoardRow({
     <Group style={{ height: '100%' }}>
       {columns?.map((column, index) => (
         <Fragment key={column.id}>
-          <Panel minSize={MIN_HEIGHT}>
+          <Panel minSize={MIN_COLUMN_WIDTH}>
             <BoardColumn {...column} onRemove={handleRemoveColumn} />
           </Panel>
-          {index < columns.length - 1 && <Separator />}
+          {index < columns?.length - 1 && <Separator />}
         </Fragment>
       ))}
       <Column alignSelf="center" padding="3" gap="1">
@@ -179,7 +182,7 @@ function BoardRow({
           <Button
             variant="outline"
             onPress={handleAddColumn}
-            isDisabled={columns.length >= MAX_COLUMNS}
+            isDisabled={columns?.length >= MAX_COLUMNS}
           >
             <Icon>
               <Plus />
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 2da6fe35..5973da3c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -153,11 +153,13 @@ export interface BoardComponent {
 export interface BoardColumn {
   id: string;
   component?: ReactElement;
+  size?: number;
 }
 
 export interface BoardRow {
   id: string;
   columns: BoardColumn[];
+  size?: number;
 }
 
 export interface BoardParameters {