[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

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">

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);
       }
     }
   }