diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js index 282572d6b7b..e996bb08b09 100644 --- a/plugins/woocommerce-admin/client/homescreen/layout.js +++ b/plugins/woocommerce-admin/client/homescreen/layout.js @@ -64,6 +64,8 @@ export const Layout = ( { query, taskListComplete, hasTaskList, + showingProgressHeader, + isLoadingTaskLists, shouldShowWelcomeModal, shouldShowWelcomeFromCalypsoModal, isTaskListHidden, @@ -141,7 +143,9 @@ export const Layout = ( { { ! isLoadingExperimentAssignment && ! isLoadingTwoColExperimentAssignment && - ! isRunningTaskListExperiment && ( + ! isRunningTaskListExperiment && + ! isLoadingTaskLists && + ! showingProgressHeader && ( 0, + showingProgressHeader: !! taskLists.find( + ( list ) => list.isVisible && list.displayProgressHeader + ), taskListComplete: getTaskList( 'setup' )?.isComplete, installTimestamp, installTimestampHasResolved, diff --git a/plugins/woocommerce-admin/client/two-column-tasks/style.scss b/plugins/woocommerce-admin/client/two-column-tasks/style.scss index bf3a58ac0db..a6f1dc686a1 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/style.scss +++ b/plugins/woocommerce-admin/client/two-column-tasks/style.scss @@ -19,10 +19,10 @@ flex: 1; } - .woocommerce-ellipsis-menu.setup { + .woocommerce-ellipsis-menu { position: absolute; - top: 20px; - right: 16px; + top: $gap; + right: $gap-large; } .woocommerce-task-card.is-loading { @@ -130,11 +130,11 @@ } .woocommerce-task-header__contents { - max-width: 380px; + max-width: calc(60% - 2%); } .svg-background { - right: 0.5%; + right: 2%; width: 40%; } } @@ -143,6 +143,13 @@ @include single-column; } + &.two-columns .svg-background { + top: 50%; + bottom: 50%; + margin-top: auto; + margin-bottom: auto; + } + ul { display: flex; li { @@ -229,10 +236,6 @@ position: absolute; z-index: 0; right: 6%; - top: 50%; - bottom: 50%; - margin-top: auto; - margin-bottom: auto; .admin-theme-color { fill: var(--wp-admin-theme-color);