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:
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -477,7 +477,6 @@ const ProjectViewHeader = memo(() => {
|
||||
const pageHeaderStyle = useMemo(
|
||||
() => ({
|
||||
paddingInline: 0,
|
||||
marginBlockEnd: 8,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user