Skip to content

Commit d656cf0

Browse files
Zeff01claude
Zeff01
and
claude
committed
feat: minimize in-house table edit mode and prevent horizontal scroll
- Added compact mode to ProjectSelect showing count instead of badges - Reduced all padding and font sizes in EditableRow (px-2 py-2, text-xs) - Added fixed widths to EditableRow cells to match table columns - Changed table layout to table-fixed with overflow-x-auto - Maintains minimalist design with no row expansion on edit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 242c451 commit d656cf0

3 files changed

Lines changed: 83 additions & 53 deletions

File tree

‎apps/codebility/app/home/in-house/_components/shared/ProjectSelect.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ interface ProjectSelectProps {
1818
value: Project[];
1919
onChange: (projects: Project[]) => void;
2020
disabled?: boolean;
21+
compact?: boolean;
2122
}
2223

2324
export function ProjectSelect({
2425
value = [],
2526
onChange,
2627
disabled,
28+
compact = false,
2729
}: ProjectSelectProps) {
2830
const [availableProjects, setAvailableProjects] = useState<Project[]>([]);
2931
const [supabase, setSupabase] = useState<any>(null);
@@ -62,6 +64,36 @@ export function ProjectSelect({
6264
onChange(newProjects);
6365
};
6466

67+
// Compact mode: just show a dropdown with selected count, no badges
68+
if (compact) {
69+
return (
70+
<Select
71+
onValueChange={handleProjectChange}
72+
disabled={disabled}
73+
value=""
74+
>
75+
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
76+
<SelectValue placeholder={value.length > 0 ? `${value.length} selected` : "Select projects"} />
77+
</SelectTrigger>
78+
<SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
79+
{availableProjects.map((project) => {
80+
const isSelected = value.some((p) => p.id === project.id);
81+
return (
82+
<SelectItem
83+
key={project.id}
84+
value={project.id}
85+
className="dark:text-light-900 text-black"
86+
>
87+
{isSelected ? "✓ " : ""}{project.name}
88+
</SelectItem>
89+
);
90+
})}
91+
</SelectContent>
92+
</Select>
93+
);
94+
}
95+
96+
// Normal mode: show dropdown + badges
6597
return (
6698
<div className="space-y-2">
6799
{/* Dropdown for selecting more projects */}

‎apps/codebility/app/home/in-house/_components/table/EditableRow.tsx‎

Lines changed: 49 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,12 @@ interface EditableRowProps {
4242
}
4343

4444
/**
45-
* ENHANCED EditableRow - Team Lead Feedback Applied
46-
*
45+
* COMPACT EditableRow - Minimized to Match Table Layout
46+
*
4747
* CHANGES:
48-
* - Matching spacing with InHouseTable
49-
* - First 3 columns: px-6 py-3
50-
* - Email column: px-5 py-3
51-
* - Other columns: px-4 py-3
48+
* - Reduced all padding to px-2 py-2 to match compact table design
49+
* - Smaller input fields and selects
50+
* - No horizontal scroll
5251
*/
5352
export function EditableRow({
5453
data,
@@ -197,13 +196,13 @@ export function EditableRow({
197196
<img
198197
src={uploadedImage}
199198
alt="Profile"
200-
className="border-light-700 dark:border-dark-200 h-10 w-10 rounded-full border object-cover"
199+
className="border-light-700 dark:border-dark-200 h-8 w-8 rounded-full border object-cover"
201200
/>
202201
<label
203202
htmlFor="upload-avatar"
204-
className="absolute bottom-0 right-0 cursor-pointer rounded-full bg-gray-200 p-0.5 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
203+
className="absolute -bottom-0.5 -right-0.5 cursor-pointer rounded-full bg-gray-200 p-0.5 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
205204
>
206-
<Plus className="h-4 w-4 text-gray-700 dark:text-gray-300" />
205+
<Plus className="h-2.5 w-2.5 text-gray-700 dark:text-gray-300" />
207206
<input
208207
id="upload-avatar"
209208
type="file"
@@ -220,9 +219,9 @@ export function EditableRow({
220219
) : (
221220
<label
222221
htmlFor="upload-avatar"
223-
className="inline-flex cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
222+
className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-gray-200 p-1 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
224223
>
225-
<Upload className="h-5 w-5 text-gray-700 dark:text-gray-300" />
224+
<Upload className="h-4 w-4 text-gray-700 dark:text-gray-300" />
226225
<input
227226
id="upload-avatar"
228227
type="file"
@@ -248,10 +247,10 @@ export function EditableRow({
248247
}
249248
disabled={isSubmitting || isUploading}
250249
>
251-
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 border text-black dark:text-white">
250+
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
252251
<SelectValue placeholder="Select status" />
253252
</SelectTrigger>
254-
<SelectContent className="bg-light-800 dark:bg-dark-300 text-black dark:text-white">
253+
<SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
255254
{Object.entries(INTERNAL_STATUS).map(([key, label]) => (
256255
<SelectItem key={key} value={key}>
257256
{label}
@@ -270,10 +269,10 @@ export function EditableRow({
270269
}
271270
disabled={isSubmitting || isUploading}
272271
>
273-
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 border text-black dark:text-white">
272+
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
274273
<SelectValue placeholder="Select role" />
275274
</SelectTrigger>
276-
<SelectContent className="bg-light-800 dark:bg-dark-300 text-black dark:text-white">
275+
<SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
277276
{roles.map((role) => (
278277
<SelectItem key={role.id} value={String(role.id)}>
279278
{role.name}
@@ -292,10 +291,10 @@ export function EditableRow({
292291
}
293292
disabled={isSubmitting || isUploading}
294293
>
295-
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 border text-black dark:text-white">
294+
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
296295
<SelectValue placeholder="Select position" />
297296
</SelectTrigger>
298-
<SelectContent className="bg-light-800 dark:bg-dark-300 text-black dark:text-white">
297+
<SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
299298
{positions.map((pos) => (
300299
<SelectItem key={pos.id} value={pos.name || ""}>
301300
{pos.name}
@@ -307,11 +306,14 @@ export function EditableRow({
307306

308307
case "projects":
309308
return (
310-
<ProjectSelect
311-
value={editForm.projects || []}
312-
onChange={(projects) => handleLocalChange("projects", projects)}
313-
disabled={isSubmitting || isUploading}
314-
/>
309+
<div className="flex items-center gap-1">
310+
<ProjectSelect
311+
value={editForm.projects || []}
312+
onChange={(projects) => handleLocalChange("projects", projects)}
313+
disabled={isSubmitting || isUploading}
314+
compact={true}
315+
/>
316+
</div>
315317
);
316318

317319
case "nda_status":
@@ -323,10 +325,10 @@ export function EditableRow({
323325
}
324326
disabled={isSubmitting || isUploading}
325327
>
326-
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 border text-black dark:text-white">
328+
<SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
327329
<SelectValue placeholder="Select NDA status" />
328330
</SelectTrigger>
329-
<SelectContent className="bg-light-800 dark:bg-dark-300 text-black dark:text-white">
331+
<SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
330332
<SelectItem value="Yes">Yes</SelectItem>
331333
<SelectItem value="No">No</SelectItem>
332334
</SelectContent>
@@ -363,7 +365,7 @@ export function EditableRow({
363365
handleLocalChange("date_joined", dateValue);
364366
}}
365367
disabled={isSubmitting || isUploading}
366-
className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 border text-black dark:text-white"
368+
className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white"
367369
/>
368370
);
369371

@@ -373,51 +375,47 @@ export function EditableRow({
373375
value={String(editForm[key] || "")}
374376
onChange={(e) => handleLocalChange(key, e.target.value)}
375377
disabled={isSubmitting || isUploading}
376-
className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 border text-black dark:text-white"
378+
className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 w-full border text-xs text-black dark:text-white"
377379
/>
378380
);
379381
}
380382
};
381383

382384
return (
383385
<TableRow className="bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300">
384-
{/* ENHANCED: First 3 columns px-6 py-3 */}
385-
<TableCell className="px-6 py-3">{renderCell("image_url")}</TableCell>
386-
<TableCell className="px-6 py-3">{renderCell("first_name")}</TableCell>
387-
<TableCell className="px-6 py-3">{renderCell("last_name")}</TableCell>
388-
389-
{/* ENHANCED: Email column px-5 py-3 */}
390-
<TableCell className="px-5 py-3">{renderCell("email_address")}</TableCell>
391-
392-
{/* ENHANCED: Other columns px-4 py-3 */}
393-
<TableCell className="px-4 py-3">{renderCell("internal_status")}</TableCell>
394-
<TableCell className="px-4 py-3">{renderCell("role_id")}</TableCell>
395-
<TableCell className="px-4 py-3">{renderCell("display_position")}</TableCell>
396-
<TableCell className="px-4 py-3">{renderCell("projects")}</TableCell>
397-
<TableCell className="px-4 py-3">{renderCell("nda_status")}</TableCell>
398-
<TableCell className="px-4 py-3">{renderCell("portfolio_website")}</TableCell>
399-
<TableCell className="px-4 py-3">{renderCell("date_joined")}</TableCell>
400-
<TableCell className="px-4 py-3">{renderCell("availability_status")}</TableCell>
401-
402-
{/* Actions - px-4 py-3 */}
403-
<TableCell className="px-4 py-3">
404-
<div className="flex space-x-2">
386+
{/* COMPACT: All columns px-2 py-2, constrained widths to match table */}
387+
<TableCell className="w-12 px-2 py-2">{renderCell("image_url")}</TableCell>
388+
<TableCell className="w-24 px-2 py-2">{renderCell("first_name")}</TableCell>
389+
<TableCell className="w-24 px-2 py-2">{renderCell("last_name")}</TableCell>
390+
<TableCell className="w-40 px-2 py-2">{renderCell("email_address")}</TableCell>
391+
<TableCell className="hidden w-24 px-2 py-2 2xl:table-cell">{renderCell("internal_status")}</TableCell>
392+
<TableCell className="hidden w-20 px-2 py-2 2xl:table-cell">{renderCell("role_id")}</TableCell>
393+
<TableCell className="hidden w-32 px-2 py-2 2xl:table-cell">{renderCell("display_position")}</TableCell>
394+
<TableCell className="hidden w-32 px-2 py-2 2xl:table-cell">{renderCell("projects")}</TableCell>
395+
<TableCell className="hidden w-36 px-2 py-2 2xl:table-cell">{renderCell("nda_status")}</TableCell>
396+
<TableCell className="hidden w-16 px-2 py-2 2xl:table-cell">{renderCell("portfolio_website")}</TableCell>
397+
<TableCell className="hidden w-24 px-2 py-2 2xl:table-cell">{renderCell("date_joined")}</TableCell>
398+
<TableCell className="hidden w-20 px-2 py-2 2xl:table-cell">{renderCell("availability_status")}</TableCell>
399+
400+
{/* COMPACT: Actions - smaller buttons */}
401+
<TableCell className="w-16 px-2 py-2">
402+
<div className="flex gap-1">
405403
<Button
406404
size="sm"
407405
onClick={handleSave}
408406
disabled={isSubmitting || isUploading}
409-
className="hover:bg-green-500 dark:hover:bg-green-500 bg-white text-white dark:bg-transparent"
407+
className="hover:bg-green-500 dark:hover:bg-green-500 h-7 w-7 bg-white p-0 text-white dark:bg-transparent"
410408
>
411-
<Check className="text-black-100 h-4 w-4 dark:text-white" />
409+
<Check className="text-black-100 h-3.5 w-3.5 dark:text-white" />
412410
</Button>
413411
<Button
414412
size="sm"
415413
variant="ghost"
416414
onClick={onCancel}
417415
disabled={isSubmitting || isUploading}
418-
className="hover:bg-red-500/20 hover:text-red-500"
416+
className="hover:bg-red-500/20 hover:text-red-500 h-7 w-7 p-0"
419417
>
420-
<X className="h-4 w-4 dark:text-white" />
418+
<X className="h-3.5 w-3.5 dark:text-white" />
421419
</Button>
422420
</div>
423421
</TableCell>

‎apps/codebility/app/home/in-house/_components/table/InHouseTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -360,8 +360,8 @@ export function InHouseTable({
360360
/>
361361

362362
{/* COMPACT: Using table-auto with specific column widths to prevent overflow */}
363-
<div className="border-light-700 dark:border-dark-200 bg-light-300 dark:bg-dark-100 hidden rounded-lg border xl:block">
364-
<Table className="w-full">
363+
<div className="border-light-700 dark:border-dark-200 bg-light-300 dark:bg-dark-100 hidden overflow-x-auto rounded-lg border xl:block">
364+
<Table className="w-full table-fixed">
365365
<TableHeader>
366366
<TableRow className="border-light-700 dark:border-dark-200 bg-light-200 dark:bg-dark-300 border-b-2">
367367
{columns.map((column) =>

0 commit comments

Comments
 (0)