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;