Merge pull request #22639 from overleaf/td-ds-nav-tag-men-toggle-bg

Preserve background on expanded tag menu toggle button in DS nav project dashboard

GitOrigin-RevId: cc5f6092236150e123202af17e1c2eaecca29654

services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss

@@ -213,8 +213,10 @@
             display: none;
           }
 
-          &:hover {
-            background-color: var(--neutral-20) !important;
+          &:hover,
+          &:active,
+          &[aria-expanded='true'] {
+            background-color: var(--neutral-20);
           }
         }
       }

services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss

@@ -17,374 +17,417 @@
   padding: 0 var(--spacing-02);
 }
 
-#project-list-root {
-  .user-notifications ul {
-    margin-bottom: 0;
-  }
+#project-list-root .user-notifications ul {
+  margin-bottom: 0;
+}
 
-  .project-list-sidebar-wrapper-react {
-    button {
-      white-space: normal;
-      word-wrap: anywhere;
+.project-list-sidebar-wrapper-react {
+  button {
+    white-space: normal;
+    word-wrap: anywhere;
 
-      // prevents buttons from expanding sidebar width
-    }
+    // prevents buttons from expanding sidebar width
+  }
 
-    .new-project-dropdown {
-      width: 100%;
+  .new-project-dropdown {
+    width: 100%;
 
-      .new-project-button {
-        width: 100%;
-      }
+    .new-project-button {
+      width: 100%;
     }
   }
+}
 
-  .new-project-button.dropdown-toggle::after {
-    display: none;
-  }
+.new-project-button.dropdown-toggle::after {
+  display: none;
+}
 
-  .project-list-welcome-wrapper {
-    width: 100%;
-    padding-bottom: var(--spacing-08);
+.project-list-welcome-wrapper {
+  width: 100%;
+  padding-bottom: var(--spacing-08);
 
-    .welcome-new-wrapper {
-      .welcome-title {
-        @include heading-xl;
+  .welcome-new-wrapper {
+    .welcome-title {
+      @include heading-xl;
 
-        margin-top: var(--spacing-08);
-      }
+      margin-top: var(--spacing-08);
+    }
 
-      .welcome-message-cards-wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: var(--spacing-11);
+    .welcome-message-cards-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: var(--spacing-11);
 
-        @include media-breakpoint-up(lg) {
-          flex-direction: row;
-          justify-content: center;
-        }
+      @include media-breakpoint-up(lg) {
+        flex-direction: row;
+        justify-content: center;
       }
+    }
 
-      .welcome-message-card {
-        border: 1px solid $bg-light-tertiary;
-        border-radius: $border-radius-large;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--spacing-08) var(--spacing-06);
-        margin: var(--spacing-05) 0;
-        height: 200px;
-        position: relative;
-        cursor: pointer;
+    .welcome-message-card {
+      border: 1px solid $bg-light-tertiary;
+      border-radius: $border-radius-large;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--spacing-08) var(--spacing-06);
+      margin: var(--spacing-05) 0;
+      height: 200px;
+      position: relative;
+      cursor: pointer;
 
-        @include media-breakpoint-up(lg) {
-          margin: 0 var(--spacing-06);
-          height: 240px;
-        }
+      @include media-breakpoint-up(lg) {
+        margin: 0 var(--spacing-06);
+        height: 240px;
+      }
 
-        &:hover {
-          background-color: $bg-light-secondary;
-        }
+      &:hover {
+        background-color: $bg-light-secondary;
+      }
 
-        .welcome-message-card-img {
-          max-width: 100%;
+      .welcome-message-card-img {
+        max-width: 100%;
 
-          @include media-breakpoint-up(lg) {
-            margin-bottom: var(--spacing-07);
-          }
+        @include media-breakpoint-up(lg) {
+          margin-bottom: var(--spacing-07);
         }
       }
+    }
 
-      .welcome-message-card-item {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        width: 280px;
+    .welcome-message-card-item {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      width: 280px;
 
-        @include media-breakpoint-up(lg) {
-          flex: 0 1 312px;
-          width: auto;
-        }
+      @include media-breakpoint-up(lg) {
+        flex: 0 1 312px;
+        width: auto;
       }
+    }
 
-      .create-new-project-dropdown {
-        transform: none !important;
-        top: 100% !important;
-        left: var(--spacing-06) !important;
-        right: var(--spacing-06) !important;
-        margin-top: var(--spacing-04);
-        margin-left: var(--spacing-06);
-        margin-right: var(--spacing-06);
-
-        @include media-breakpoint-down(lg) {
-          left: 0 !important;
-          right: 0 !important;
-          margin-top: calc((var(--spacing-05) - var(--spacing-04)) * -1);
-        }
+    .create-new-project-dropdown {
+      transform: none !important;
+      top: 100% !important;
+      left: var(--spacing-06) !important;
+      right: var(--spacing-06) !important;
+      margin-top: var(--spacing-04);
+      margin-left: var(--spacing-06);
+      margin-right: var(--spacing-06);
+
+      @include media-breakpoint-down(lg) {
+        left: 0 !important;
+        right: 0 !important;
+        margin-top: calc((var(--spacing-05) - var(--spacing-04)) * -1);
       }
+    }
 
-      .welcome-message-card-link {
-        &,
-        &:hover {
-          text-decoration: none;
-          color: var(--bs-body-color);
-        }
+    .welcome-message-card-link {
+      &,
+      &:hover {
+        text-decoration: none;
+        color: var(--bs-body-color);
       }
     }
   }
+}
 
-  .project-list-header-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--spacing-05);
-    min-height: 36px;
-  }
+.project-list-header-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-05);
+  min-height: 36px;
+}
 
-  .project-list-title {
-    min-width: 0;
-    color: $content-secondary;
+.project-list-title {
+  min-width: 0;
+  color: $content-secondary;
 
-    @include heading-sm;
+  @include heading-sm;
 
-    font-weight: bold;
-  }
+  font-weight: bold;
+}
 
+.project-tools {
+  flex-shrink: 0;
+  margin-left: auto;
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+}
+
+@include media-breakpoint-down(md) {
   .project-tools {
-    flex-shrink: 0;
-    margin-left: auto;
-    min-height: 38px;
-    display: flex;
-    align-items: center;
+    float: left;
+    margin-left: initial;
   }
+}
 
-  @include media-breakpoint-down(md) {
-    .project-tools {
-      float: left;
-      margin-left: initial;
-    }
+.projects-toolbar {
+  display: flex;
+  align-items: center;
+
+  .dropdown,
+  .dropdown-toggle {
+    max-width: 100%;
   }
 
-  .projects-toolbar {
-    display: flex;
-    align-items: center;
+  .dropdown {
+    min-width: 0;
+  }
+}
+
+.projects-sort-dropdown {
+  flex-shrink: 0;
+  margin-left: auto;
+}
 
-    .dropdown,
-    .dropdown-toggle {
-      max-width: 100%;
+.project-menu-item-edit-btn {
+  position: absolute;
+  top: 0;
+  right: var(--spacing-09);
+  width: initial;
+  background-color: transparent;
+}
+
+.project-menu-item-tag-name {
+  padding-right: var(--spacing-13);
+}
+
+ul.project-list-filters {
+  .subdued {
+    color: var(--content-disabled);
+  }
+
+  > li {
+    cursor: pointer;
+    position: relative;
+
+    > button {
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
     }
 
-    .dropdown {
-      min-width: 0;
+    &.separator {
+      padding: var(--spacing-03) var(--spacing-06);
+      cursor: auto;
     }
   }
 
-  .projects-sort-dropdown {
-    flex-shrink: 0;
-    margin-left: auto;
+  .dropdown-header {
+    @include body-sm;
+
+    padding: var(--spacing-05) var(--spacing-06);
+    text-transform: uppercase;
   }
 
-  .project-menu-item-edit-btn {
-    position: absolute;
-    top: 0;
-    right: var(--spacing-09);
-    width: initial;
-    background-color: transparent;
+  > li.active {
+    border-radius: 0;
+
+    > button {
+      font-weight: 700;
+    }
   }
 
-  .project-menu-item-tag-name {
-    padding-right: var(--spacing-13);
+  h2 {
+    font-size: var(--font-size-02);
+    margin-bottom: var(--spacing-00);
+    color: var(--content-disabled);
+    text-transform: uppercase;
+    padding: var(--spacing-03) var(--spacing-00);
   }
 
-  ul.project-list-filters {
-    .subdued {
-      color: var(--content-disabled);
+  > li.tag {
+    &.active,
+    &:focus-within {
+      .tag-menu {
+        display: block;
+      }
     }
 
-    > li {
-      cursor: pointer;
-      position: relative;
-
-      > button {
-        &:hover,
-        &:focus {
-          text-decoration: none;
+    &.untagged {
+      button.tag-name {
+        span.name {
+          font-style: italic;
+          padding-left: 0;
         }
       }
+    }
 
-      &.separator {
-        padding: var(--spacing-03) var(--spacing-06);
-        cursor: auto;
+    &:hover {
+      .tag-menu {
+        display: block;
       }
     }
 
-    .dropdown-header {
-      @include body-sm;
+    button.tag-name {
+      position: relative;
+      padding: var(--spacing-03) var(--spacing-09) var(--spacing-03)
+        var(--spacing-06);
+      display: flex;
+      align-items: center;
+      word-wrap: anywhere;
+
+      .tag-list-icon {
+        vertical-align: sub;
+        font-weight: bold;
+      }
 
-      padding: var(--spacing-05) var(--spacing-06);
-      text-transform: uppercase;
+      span.name {
+        padding-left: 0.5em;
+        line-height: 1.4;
+      }
     }
+  }
 
-    > li.active {
-      border-radius: 0;
+  .tag-menu {
+    button.dropdown-toggle {
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
 
-      > button {
-        font-weight: 700;
+      &::after {
+        margin: 0;
       }
     }
 
-    h2 {
-      font-size: var(--font-size-02);
-      margin-bottom: var(--spacing-00);
-      color: var(--content-disabled);
-      text-transform: uppercase;
-      padding: var(--spacing-03) var(--spacing-00);
-    }
+    display: none;
+    width: auto;
+    position: absolute;
+    top: 50%;
+    margin-top: -8px; // Half the element height.
+    right: 4px;
 
-    > li.tag {
-      &.active,
-      &:focus-within {
-        .tag-menu {
-          display: block;
-        }
-      }
+    &.open {
+      display: block;
+    }
 
-      &.untagged {
-        button.tag-name {
-          span.name {
-            font-style: italic;
-            padding-left: 0;
-          }
-        }
-      }
+    button.tag-action {
+      border-radius: unset;
+      width: 100%;
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--neutral-70);
+      text-align: left;
+      font-weight: normal;
 
       &:hover {
-        .tag-menu {
-          display: block;
-        }
+        color: var(--content-primary-dark);
+        background-color: var(--bg-accent-01);
       }
 
-      button.tag-name {
-        position: relative;
-        padding: var(--spacing-03) var(--spacing-09) var(--spacing-03)
-          var(--spacing-06);
-        display: flex;
-        align-items: center;
-        word-wrap: anywhere;
-
-        .tag-list-icon {
-          vertical-align: sub;
-          font-weight: bold;
-        }
-
-        span.name {
-          padding-left: 0.5em;
-          line-height: 1.4;
-        }
+      &:active {
+        outline: none;
       }
     }
+  }
+}
 
-    .tag-menu {
-      button.dropdown-toggle {
-        background-color: transparent;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
+.project-dash-table {
+  width: 100%;
+  table-layout: fixed;
 
-        &::after {
-          margin: 0;
-        }
-      }
+  @include media-breakpoint-down(md) {
+    tr:not(:last-child) {
+      border-bottom: 1px solid $table-border-color;
+    }
 
-      display: none;
-      width: auto;
-      position: absolute;
-      top: 50%;
-      margin-top: -8px; // Half the element height.
-      right: 4px;
+    td {
+      border-bottom-width: 0;
+    }
+  }
 
-      &.open {
-        display: block;
+  tbody {
+    tr.no-projects:hover {
+      td {
+        box-shadow: none;
       }
+    }
+  }
 
-      button.tag-action {
-        border-radius: unset;
-        width: 100%;
-        background-color: transparent;
-        border-color: transparent;
-        color: var(--neutral-70);
-        text-align: left;
-        font-weight: normal;
-
-        &:hover {
-          color: var(--content-primary-dark);
-          background-color: var(--bg-accent-01);
-        }
+  .table-header-sort-btn {
+    border: 0;
+    text-align: left;
+    color: var(--content-secondary);
+    background-color: transparent;
+    padding: 0;
+    font-weight: bold;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
 
-        &:active {
-          outline: none;
-        }
-      }
+    &:hover,
+    &:focus {
+      color: var(--content-secondary);
+      text-decoration: none;
+    }
+
+    .material-symbols {
+      vertical-align: bottom;
+      font-size: var(--font-size-06);
     }
   }
 
-  .project-dash-table {
-    width: 100%;
-    table-layout: fixed;
+  .dash-cell-name {
+    hyphens: auto;
+    width: 50%;
+    word-break: break-word;
+  }
 
-    @include media-breakpoint-down(md) {
-      tr:not(:last-child) {
-        border-bottom: 1px solid $table-border-color;
-      }
+  .dash-cell-owner {
+    width: 20%;
+  }
 
-      td {
-        border-bottom-width: 0;
-      }
-    }
+  .dash-cell-date {
+    width: 25%;
+  }
 
-    tbody {
-      tr.no-projects:hover {
-        td {
-          box-shadow: none;
-        }
-      }
-    }
+  .dash-cell-actions {
+    display: none;
+    text-align: right;
 
-    .table-header-sort-btn {
-      border: 0;
-      text-align: left;
-      color: var(--content-secondary);
-      background-color: transparent;
-      padding: 0;
-      font-weight: bold;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .btn {
       text-decoration: none;
+    }
+  }
 
-      &:hover,
-      &:focus {
-        color: var(--content-secondary);
-        text-decoration: none;
-      }
+  .dash-cell-date-owner {
+    font-size: $font-size-sm;
+
+    @include text-truncate;
+  }
+
+  .dash-cell-tag,
+  .clone-project-tag {
+    .badge-tag {
+      margin-top: var(--spacing-06);
+      margin-bottom: var(--spacing-06);
 
-      .material-symbols {
-        vertical-align: bottom;
-        font-size: var(--font-size-06);
+      &:first-child {
+        margin-left: initial !important;
       }
     }
+  }
+
+  @include media-breakpoint-up(sm) {
+    .dash-cell-checkbox {
+      width: 4%;
+    }
 
     .dash-cell-name {
-      hyphens: auto;
       width: 50%;
-      word-break: break-word;
     }
 
     .dash-cell-owner {
-      width: 20%;
+      width: 21%;
     }
 
     .dash-cell-date {
@@ -392,184 +435,139 @@
     }
 
     .dash-cell-actions {
-      display: none;
-      text-align: right;
-
-      .btn {
-        text-decoration: none;
-      }
+      width: 0%;
     }
+  }
 
-    .dash-cell-date-owner {
-      font-size: $font-size-sm;
-
-      @include text-truncate;
+  @include media-breakpoint-up(md) {
+    .dash-cell-checkbox {
+      width: 4%;
     }
 
-    .dash-cell-tag,
-    .clone-project-tag {
-      .badge-tag {
-        margin-top: var(--spacing-06);
-        margin-bottom: var(--spacing-06);
-
-        &:first-child {
-          margin-left: initial !important;
-        }
-      }
+    .dash-cell-name {
+      width: 44%;
     }
 
-    @include media-breakpoint-up(sm) {
-      .dash-cell-checkbox {
-        width: 4%;
-      }
+    .dash-cell-owner {
+      width: 16%;
+    }
 
-      .dash-cell-name {
-        width: 50%;
-      }
+    .dash-cell-date {
+      width: 21%;
+    }
 
-      .dash-cell-owner {
-        width: 21%;
-      }
+    .dash-cell-actions {
+      display: table-cell;
+      width: 15%;
+    }
 
-      .dash-cell-date {
-        width: 25%;
-      }
+    .project-tools {
+      float: none;
+    }
+  }
 
-      .dash-cell-actions {
-        width: 0%;
-      }
+  @include media-breakpoint-up(lg) {
+    .dash-cell-checkbox {
+      width: 3%;
     }
 
-    @include media-breakpoint-up(md) {
-      .dash-cell-checkbox {
-        width: 4%;
-      }
+    .dash-cell-name {
+      width: 46%;
+    }
 
-      .dash-cell-name {
-        width: 44%;
-      }
+    .dash-cell-owner {
+      width: 13%;
+    }
 
-      .dash-cell-owner {
-        width: 16%;
-      }
+    .dash-cell-date {
+      width: 16%;
+    }
 
-      .dash-cell-date {
-        width: 21%;
-      }
+    .dash-cell-actions {
+      width: 22%;
+    }
 
+    tbody {
       .dash-cell-actions {
-        display: table-cell;
-        width: 15%;
-      }
-
-      .project-tools {
-        float: none;
+        white-space: nowrap;
       }
     }
+  }
 
-    @include media-breakpoint-up(lg) {
-      .dash-cell-checkbox {
-        width: 3%;
-      }
-
-      .dash-cell-name {
-        width: 46%;
-      }
-
-      .dash-cell-owner {
-        width: 13%;
-      }
-
-      .dash-cell-date {
-        width: 16%;
-      }
+  @include media-breakpoint-up(xl) {
+    .dash-cell-checkbox {
+      width: 3%;
+    }
 
-      .dash-cell-actions {
-        width: 22%;
-      }
+    .dash-cell-name {
+      width: 46%;
+    }
 
-      tbody {
-        .dash-cell-actions {
-          white-space: nowrap;
-        }
-      }
+    .dash-cell-owner {
+      width: 15%;
     }
 
-    @include media-breakpoint-up(xl) {
-      .dash-cell-checkbox {
-        width: 3%;
-      }
+    .dash-cell-date {
+      width: 19%;
+    }
 
-      .dash-cell-name {
-        width: 46%;
-      }
+    .dash-cell-actions {
+      width: 17%;
+    }
+  }
 
-      .dash-cell-owner {
-        width: 15%;
-      }
+  @include media-breakpoint-up(xxl) {
+    .dash-cell-checkbox {
+      width: 2%;
+    }
 
-      .dash-cell-date {
-        width: 19%;
-      }
+    .dash-cell-name {
+      width: 49%;
+    }
 
-      .dash-cell-actions {
-        width: 17%;
-      }
+    .dash-cell-owner {
+      width: 16%;
     }
 
-    @include media-breakpoint-up(xxl) {
-      .dash-cell-checkbox {
-        width: 2%;
-      }
+    .dash-cell-date {
+      width: 19%;
+    }
 
-      .dash-cell-name {
-        width: 49%;
-      }
+    .dash-cell-actions {
+      width: 14%;
+    }
+  }
 
-      .dash-cell-owner {
-        width: 16%;
-      }
+  @include media-breakpoint-down(md) {
+    tr {
+      position: relative;
+      display: flex;
+      flex-direction: column;
 
-      .dash-cell-date {
-        width: 19%;
+      td {
+        padding-top: var(--spacing-02);
+        padding-bottom: var(--spacing-02);
       }
 
-      .dash-cell-actions {
-        width: 14%;
+      td:not(.dash-cell-actions) {
+        padding-right: 55px;
       }
     }
 
-    @include media-breakpoint-down(md) {
-      tr {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-
-        td {
-          padding-top: var(--spacing-02);
-          padding-bottom: var(--spacing-02);
-        }
-
-        td:not(.dash-cell-actions) {
-          padding-right: 55px;
-        }
-      }
-
-      .dash-cell-name,
-      .dash-cell-owner,
-      .dash-cell-date,
-      .dash-cell-tag,
-      .dash-cell-actions {
-        display: block;
-        width: auto;
-      }
+    .dash-cell-name,
+    .dash-cell-owner,
+    .dash-cell-date,
+    .dash-cell-tag,
+    .dash-cell-actions {
+      display: block;
+      width: auto;
+    }
 
-      .dash-cell-actions {
-        position: absolute;
-        top: var(--spacing-04);
-        right: var(--spacing-04);
-        padding: 0 !important;
-      }
+    .dash-cell-actions {
+      position: absolute;
+      top: var(--spacing-04);
+      right: var(--spacing-04);
+      padding: 0 !important;
     }
   }
 }