diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx index e2a9f87fd7..95cfaa2853 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx +++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx @@ -18,6 +18,7 @@ import getMeta from '@/utils/meta' import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar' import FatFooter from '@/features/ui/components/bootstrap-5/footer/fat-footer' import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav' +import SystemMessages from '@/shared/components/system-messages' export function ProjectListDsNav() { const navbarProps = getMeta('ol-navbar') @@ -59,66 +60,71 @@ export function ProjectListDsNav() { />
-
-
- {error ? : ''} - -
- -
-
- {selectedProjects.length === 0 ? ( +
+
+
+ {error ? : ''} + +
+ +
+
+ {selectedProjects.length === 0 ? ( + + ) : ( + + )} +
+
- ) : ( - - )} +
-
- +
+
+ + + + + +
+ {/* Omit the survey card in mobile view for now */} +
+
+
+ + +
+
+
+ + {tableTopArea} + + +
+
+
-
- - - - - -
- {/* Omit the survey card in mobile view for now */} -
-
-
- - -
-
-
- - {tableTopArea} - - -
-
- -
-
+ +
+
+
-
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss index 433b6a541c..f9126d17b0 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss @@ -249,16 +249,22 @@ } } - .project-ds-nav-content { + .project-ds-nav-content-and-messages { flex-grow: 1; - overflow-y: auto; - position: relative; - background-color: var(--bg-light-secondary); + display: flex; + flex-direction: column; - @include media-breakpoint-up(md) { - border-top-left-radius: var(--border-radius-large); - border-left: 1px solid var(--border-divider); - border-top: 1px solid var(--border-divider); + .project-ds-nav-content { + flex-grow: 1; + overflow-y: auto; + position: relative; + background-color: var(--bg-light-secondary); + + @include media-breakpoint-up(md) { + border-top-left-radius: var(--border-radius-large); + border-left: 1px solid var(--border-divider); + border-top: 1px solid var(--border-divider); + } } } }