Skip to content

Commit 6fffad4

Browse files
Zeff01claude
Zeff01
and
claude
committed
Fix filter compression in in-house page
- Increased filter component padding and spacing - Made filter dropdowns taller (h-9 to h-10) - Increased label font size back to text-sm - Added gap between tabs and filters for better visual hierarchy - Increased search input width to 400px max - Made tabs slightly larger for better usability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 601939e commit 6fffad4

2 files changed

Lines changed: 22 additions & 22 deletions

File tree

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,18 +137,18 @@ export default function InHouseView({ initialData }: InHouseViewProps) {
137137
</div>
138138

139139
{/* Tabs for Active/Inactive */}
140-
<div className="flex items-center gap-3">
140+
<div className="flex flex-col gap-4">
141141
<Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "active" | "inactive")} className="w-full">
142-
<TabsList className="grid h-7 w-full max-w-[240px] grid-cols-2 bg-gray-100 dark:bg-gray-800">
143-
<TabsTrigger value="active" className="flex h-6 items-center gap-1 text-[11px]">
142+
<TabsList className="grid h-9 w-full max-w-[280px] grid-cols-2 bg-gray-100 dark:bg-gray-800">
143+
<TabsTrigger value="active" className="flex h-8 items-center gap-1 text-xs">
144144
Active
145-
<span className="rounded-full bg-emerald-600/20 px-1 py-0 text-[9px] font-semibold text-emerald-600 dark:text-emerald-400">
145+
<span className="rounded-full bg-emerald-600/20 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
146146
{stats.active}
147147
</span>
148148
</TabsTrigger>
149-
<TabsTrigger value="inactive" className="flex h-6 items-center gap-1 text-[11px]">
149+
<TabsTrigger value="inactive" className="flex h-8 items-center gap-1 text-xs">
150150
Inactive
151-
<span className="rounded-full bg-red-600/20 px-1 py-0 text-[9px] font-semibold text-red-600 dark:text-red-400">
151+
<span className="rounded-full bg-red-600/20 px-1.5 py-0.5 text-[10px] font-semibold text-red-600 dark:text-red-400">
152152
{stats.inactive}
153153
</span>
154154
</TabsTrigger>

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
103103
}, [supabase]);
104104

105105
return (
106-
<Card className="border-light-700 bg-light-300 dark:border-dark-200 dark:bg-dark-100 mb-4 p-2 sm:p-3">
106+
<Card className="border-light-700 bg-light-300 dark:border-dark-200 dark:bg-dark-100 mb-4 p-3 sm:p-4">
107107
{/* Mobile Layout */}
108108
<div className="block sm:hidden space-y-3">
109109
{/* Search Bar */}
@@ -123,18 +123,18 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
123123
{/* Desktop Layout */}
124124
<div className="hidden sm:block space-y-3">
125125
{/* Search - Full width on desktop */}
126-
<div className="w-full sm:max-w-[300px]">
126+
<div className="w-full sm:max-w-[400px]">
127127
<Label className="dark:text-light-900 mb-1.5 block text-sm font-medium text-black">Search</Label>
128128
<Input
129129
placeholder="Search name, email..."
130130
value={filters.search}
131131
onChange={(e) => onFilterChange("search", e.target.value)}
132-
className="border-light-700 bg-white dark:border-dark-200 dark:bg-dark-200 dark:text-light-900 h-9 w-full rounded-md border px-3 text-sm text-black focus:border-customBlue-500 focus:outline-none focus:ring-1 focus:ring-customBlue-500"
132+
className="border-light-700 bg-white dark:border-dark-200 dark:bg-dark-200 dark:text-light-900 h-10 w-full rounded-md border px-4 text-sm text-black focus:border-customBlue-500 focus:outline-none focus:ring-1 focus:ring-customBlue-500"
133133
/>
134134
</div>
135135

136136
{/* Filters - Desktop grid */}
137-
<div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
137+
<div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
138138
{renderFilters()}
139139
</div>
140140
</div>
@@ -266,7 +266,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
266266
<>
267267
{/* Status Filter */}
268268
<div>
269-
<Label className="dark:text-light-900 mb-1.5 block text-xs font-medium text-black">Status</Label>
269+
<Label className="dark:text-light-900 mb-1.5 block text-sm font-medium text-black">Status</Label>
270270
<Select
271271
value={filters.status || "all"}
272272
onValueChange={(val) =>
@@ -277,7 +277,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
277277
className="
278278
border-light-700 bg-white dark:border-dark-200
279279
dark:bg-dark-200 dark:text-light-900
280-
h-8 sm:h-9 w-full
280+
h-9 sm:h-10 w-full
281281
rounded-md
282282
border px-2 sm:px-3
283283
text-xs sm:text-sm text-black
@@ -298,7 +298,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
298298

299299
{/* Display Position Filter */}
300300
<div className="min-w-[140px] sm:min-w-0">
301-
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-xs font-medium text-black">
301+
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-sm font-medium text-black">
302302
Position
303303
</Label>
304304
<Select
@@ -311,7 +311,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
311311
className="
312312
border-light-700 bg-white dark:border-dark-200
313313
dark:bg-dark-200 dark:text-light-900
314-
h-8 sm:h-9 w-full
314+
h-9 sm:h-10 w-full
315315
rounded-md
316316
border px-2 sm:px-3
317317
text-xs sm:text-sm text-black
@@ -332,7 +332,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
332332

333333
{/* Project Filter */}
334334
<div className="min-w-[140px] sm:min-w-0">
335-
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-xs font-medium text-black">Project</Label>
335+
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-sm font-medium text-black">Project</Label>
336336
<Select
337337
value={filters.project || "all"}
338338
onValueChange={(val) =>
@@ -343,7 +343,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
343343
className="
344344
border-light-700 bg-white dark:border-dark-200
345345
dark:bg-dark-200 dark:text-light-900
346-
h-8 sm:h-9 w-full
346+
h-9 sm:h-10 w-full
347347
rounded-md
348348
border px-2 sm:px-3
349349
text-xs sm:text-sm text-black
@@ -364,7 +364,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
364364

365365
{/* NDA Status Filter */}
366366
<div className="min-w-[120px] sm:min-w-0">
367-
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-xs font-medium text-black">NDA</Label>
367+
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-sm font-medium text-black">NDA</Label>
368368
<Select
369369
value={filters.nda_status || "all"}
370370
onValueChange={(val) =>
@@ -375,7 +375,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
375375
className="
376376
border-light-700 bg-white dark:border-dark-200
377377
dark:bg-dark-200 dark:text-light-900
378-
h-8 sm:h-9 w-full
378+
h-9 sm:h-10 w-full
379379
rounded-md
380380
border px-2 sm:px-3
381381
text-xs sm:text-sm text-black
@@ -393,7 +393,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
393393

394394
{/* Role Filter */}
395395
<div className="min-w-[120px] sm:min-w-0">
396-
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-xs font-medium text-black">Role</Label>
396+
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-sm font-medium text-black">Role</Label>
397397
<Select
398398
value={filters.role || "all"}
399399
onValueChange={(val) =>
@@ -404,7 +404,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
404404
className="
405405
border-light-700 bg-white dark:border-dark-200
406406
dark:bg-dark-200 dark:text-light-900
407-
h-8 sm:h-9 w-full
407+
h-9 sm:h-10 w-full
408408
rounded-md
409409
border px-2 sm:px-3
410410
text-xs sm:text-sm text-black
@@ -424,7 +424,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
424424
</div>
425425
{/* Availability Status Filter */}
426426
<div className="min-w-[130px] sm:min-w-0">
427-
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-xs font-medium text-black">
427+
<Label className="dark:text-light-900 mb-1.5 hidden sm:block text-sm font-medium text-black">
428428
Available
429429
</Label>
430430
<Select
@@ -437,7 +437,7 @@ export function TableFilters({ filters, onFilterChange }: TableFiltersProps) {
437437
className="
438438
border-light-700 bg-white dark:border-dark-200
439439
dark:bg-dark-200 dark:text-light-900
440-
h-8 sm:h-9 w-full
440+
h-9 sm:h-10 w-full
441441
rounded-md
442442
border px-2 sm:px-3
443443
text-xs sm:text-sm text-black

0 commit comments

Comments
 (0)