refactor(task-list): enhance layout and styling for improved usability

- Adjusted heights and padding in the task list and filters for better space optimization.
- Updated styling in TaskRow for consistent alignment of task elements.
- Refined padding in ImprovedTaskFilters for a cleaner appearance.
- Removed unnecessary margin in ProjectViewHeader to streamline layout.
This commit is contained in:
chamikaJ
2025-07-08 16:51:44 +05:30
parent 6ac2a0c888
commit 68e71d09ea
4 changed files with 53 additions and 55 deletions

View File

@@ -552,7 +552,7 @@ const TaskListV2: React.FC = () => {
>
<div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
{/* Task Filters */}
<div className="flex-none" style={{ height: '74px', flexShrink: 0 }}>
<div className="flex-none" style={{ height: '54px', flexShrink: 0 }}>
<ImprovedTaskFilters position="list" />
</div>
@@ -560,7 +560,7 @@ const TaskListV2: React.FC = () => {
<div
className="border border-gray-200 dark:border-gray-700 rounded-lg"
style={{
height: 'calc(100vh - 130px)',
height: 'calc(100vh - 240px)', // Slightly reduce height to ensure scrollbar visibility
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
@@ -573,8 +573,7 @@ const TaskListV2: React.FC = () => {
style={{
overflowX: 'auto',
overflowY: 'auto',
minHeight: 0,
paddingBottom: '20px' // Add padding to ensure horizontal scrollbar is visible
minHeight: 0
}}
>
{/* Sticky Column Headers */}

View File

@@ -564,7 +564,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'phase':
return (
<div style={baseStyle}>
<div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskPhaseDropdown
task={task}
projectId={projectId}
@@ -575,7 +575,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'timeTracking':
return (
<div style={baseStyle}>
<div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} />
</div>
);

View File

@@ -1240,7 +1240,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
return (
<div
className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}
className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-1.5 shadow-sm ${className}`}
>
<div className="flex flex-wrap items-center gap-2">
{/* Left Section - Main Filters */}

View File

@@ -477,7 +477,6 @@ const ProjectViewHeader = memo(() => {
const pageHeaderStyle = useMemo(
() => ({
paddingInline: 0,
marginBlockEnd: 8,
}),
[]
);