diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx index 31939042dd..70ad27ea7a 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx +++ b/services/web/frontend/js/features/project-list/components/project-list-root.tsx @@ -45,81 +45,81 @@ function ProjectListPageContent() { ) : ( -
- {error ? : ''} - {totalProjectsCount > 0 ? ( - <> -
- - -
-
- - - - - - - - - - -
-
- {selectedProjects.length === 0 ? ( - - ) : ( - - )} -
-
- -
-
- -
-
-
- - -
+
+
+ {error ? : ''} + {totalProjectsCount > 0 ? ( + <> +
+ +
- - -
-
-
- - +
+ + + + + + + + + + +
+
+ {selectedProjects.length === 0 ? ( + + ) : ( + + )} +
+
+
- + +
+
+
+ +
- - - - - - - -
- - ) : ( -
+
+ + +
+
+
+ + +
+
+ +
+ +
+ + + + + +
+ + ) : ( -
- )} + )} +
) } diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less index 6af532186e..b88464c2f7 100644 --- a/services/web/frontend/stylesheets/app/project-list-react.less +++ b/services/web/frontend/stylesheets/app/project-list-react.less @@ -24,13 +24,23 @@ } } - .project-list-wrapper { - display: flex; - align-items: stretch; + .project-list-row { + height: 100%; + min-height: calc(~'100vh -' @header-height); } - .project-list-sidebar-wrapper-react { - flex: 0 0 15%; + .project-list-wrapper { + position: absolute; + width: 100%; + height: 100%; + } + + .project-list-sidebar-wrapper { + float: left; + position: static; + width: 15%; + min-width: 160px; + .project-list-sidebar { > .dropdown { width: 100%; @@ -42,12 +52,12 @@ } } - .project-list-welcome-wrapper { - width: 100%; - } - - .project-list-main-react { - padding: @content-margin-vertical @grid-gutter-width / 2; + .project-list-main { + position: static; + overflow: auto; + padding-left: @grid-gutter-width / 2; + padding-right: @grid-gutter-width / 2; + margin-left: initial; } ul.folders-menu { @@ -560,6 +570,12 @@ } } +.project-list-react.container, +.project-list-react .project-list-sidebar-wrapper, +.project-list-react .project-list-main { + height: 100%; +} + .current-plan { vertical-align: middle; line-height: @line-height-base;