I just have a slight addition to the CSS fixes. I didn’t really like how big the Mark Complete and Completed part was, so I modified that as well. This seems to work pretty well for me. Additionally, there’s a bit of overlap with some of the icons and the due date, but it’s tolerable for me since I never use those icons. I haven’t yet tested how this all looks when a task is added to multiple projects, but for one project at a time it seems to work really well. Here’s what it looks like:
.TaskPaneAssigneeDueDateRowStructure { position: absolute; top:9px; left:90px; border-bottom: none; z-index:200; }
.SingleTaskPaneToolbarEasyCompletion { position: sticky; top: 0px; z-index: 100; background-color: #ffffff; padding-left: 15px; }
.MessageBanner { display: none; }
.SingleTaskPaneBanners.SingleTaskPane-banners { height:40px; }
.SingleTaskPane-projects--belowDescription.SingleTaskPane-projects.TaskProjects { position:absolute; top:50px; background-color: #ffffff; margin-top:0px; padding-top:10px; }
.TaskProjectToken { float:left; }
div.Button.Button--small.Button--secondary.CompletionButton, .CompletionButton.CompletionButton--isCompleted:not(.Button--disabled) { width: 50px; font-size: 0px; padding: 0; }
svg.Icon.CheckIcon.CompletionButton-checkIcon { margin-right: 0px; }
div.TaskPaneAssigneeDueDateRowStructure-dueDate { min-width: 150px; }
Also, to add to the primary part of this discussion. My team is completely against these changes. Which project a task belongs to is exceptionally important for our team, especially as we use sections of a project as workflow stages. Attachments, task link, and the task like button are completely useless. A giant mark complete button isn’t useful beyond the initial onboarding stage. There are many things that could be done to improve Asana. These latest interface changes are not among them.