Merge pull request #22912 from overleaf/jel-cms-tabs-bs5

[web] Update admin panel to use `.ol-tabs` style

GitOrigin-RevId: c9e808c5534e5f033a8e829b35b0c6bd865cb596

services/web/app/views/_mixins/bookmarkable_tabset.pug

@@ -1,6 +1,6 @@
 mixin bookmarkable-tabset-header(id, title, active)
 	li(role="presentation")
-		a(
+		a.nav-link(
 			href='#' + id
 			class=(active ? 'active' : '')
 			aria-controls=id

services/web/app/views/admin/index.pug

@@ -13,9 +13,9 @@ block content
 						.card-body
 							.page-header
 								h1 Admin Panel
-							div(data-ol-bookmarkable-tabset)
+							.ol-tabs(data-ol-bookmarkable-tabset)
 								.nav-tabs-container
-									ul.nav.nav-tabs.d-flex(role="tablist")
+									ul.nav.nav-tabs(role="tablist")
 										+bookmarkable-tabset-header('system-messages', 'System Messages', true)
 										+bookmarkable-tabset-header('open-sockets', 'Open Sockets')
 										+bookmarkable-tabset-header('open-close-editor', 'Open/Close Editor')

services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss

@@ -36,6 +36,7 @@
           margin-right: unset;
           padding: var(--spacing-04);
           line-height: var(--line-height-03);
+          text-decoration: none;
 
           &:focus,
           &:hover {
@@ -78,49 +79,3 @@
 [data-ol-bookmarkable-tabset] .tab-pane {
   scroll-margin-top: 120px;
 }
-
-[data-ol-bookmarkable-tabset] {
-  .nav-tabs-container {
-    .nav-tabs {
-      gap: 8px;
-      flex-wrap: nowrap;
-
-      > li {
-        float: left;
-
-        // Make the list-items overlay the bottom border
-        margin-bottom: -1px;
-
-        // Actual tabs (as links)
-        > a {
-          color: var(--content-secondary);
-          border: 1px solid transparent;
-          border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
-          padding: var(--spacing-04);
-          text-decoration: none;
-
-          &:hover,
-          &:focus {
-            cursor: pointer;
-            background-color: var(--bg-light-secondary);
-          }
-        }
-
-        // Active state, and its :hover to override normal :hover
-        > a.active {
-          color: var(--content-primary);
-          background-color: var(--bg-light-primary);
-          border: 1px solid var(--border-divider);
-          border-bottom-color: transparent;
-          cursor: default;
-        }
-      }
-    }
-
-    .tab-content {
-      border: 1px solid #ddd;
-      border-top: none;
-      padding: var(--spacing-05);
-    }
-  }
-}