From 90b16e4c8e16964c2cf8d6ddc3229d2989af7d8d Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Fri, 13 Dec 2024 15:36:25 +0100
Subject: [PATCH] [web] DS-Nav footer tweaks (#22482)

* Footer tweaks (add border, main-content 100vh)

* Update color to be the same as the sidebar `<hr>`

* Move the border to the larger div so it also separates with the navbar

* Update border color to be the same as the background

* Fixup lint

* Fixup main content padding on mobile view

See https://github.com/overleaf/internal/pull/22186#discussion_r1876087478

* Change the border color to neutral-20

* Use `--border-divider` which is the same color as --neutral-20 (`#e7e9ee`)

* Replace `@media (width >= 768px)` by `@include media-breakpoint-up(md)`

* Replace `min-height: 100dvh` by `min-height: 100%`

GitOrigin-RevId: 426869e9b96a1ee8245c487bb80ff01856521a34
---
 .../project-list/components/project-list-ds-nav.tsx |  2 +-
 .../bootstrap-5/pages/project-list-ds-nav.scss      | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

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 e21c46d4d6..347edfb841 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
@@ -62,7 +62,7 @@ export function ProjectListDsNav() {
       <main className="project-list-wrapper">
         <SidebarDsNav />
         <div className="project-ds-nav-content">
-          <div className="p-4">
+          <div className="project-ds-nav-main">
             {error ? <DashApiError /> : ''}
             <UserNotifications />
             <div className="project-list-header-row">
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 7caad1a905..04aaf8b79f 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
@@ -181,6 +181,15 @@
       }
     }
 
+    .project-ds-nav-main {
+      min-height: 100%;
+      padding: var(--spacing-08) var(--spacing-06);
+
+      @include media-breakpoint-up(md) {
+        padding: var(--spacing-08);
+      }
+    }
+
     .project-dash-table {
       .btn-link {
         color: var(--content-secondary);
@@ -207,8 +216,10 @@
       position: relative;
       background-color: var(--bg-light-secondary);
 
-      @media (width >= 768px) {
+      @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);
       }
     }
   }