Adjust secondary nav css for transition before/after js runs

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index bb6f46590a05b59e644d1ac354e8e6241cf4de81..464bbecee17db7f7ded5ddcf115ff0dc2c13395b 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -172,9 +172,6 @@ $(document).ready(function () {
     });
     moreItemWidth = $("#compact-secondary-nav").width();
 
-    $("header").removeClass("text-nowrap");
-    $("header nav.secondary > ul").removeClass("flex-nowrap");
-
     updateHeader();
 
     $(window).resize(updateHeader);

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index a536f527f297520ca97c77b002a2186317805ab8..a27976854f99dc90af33a7878e326ccdff9413f8 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -170,7 +170,11 @@ nav.primary {
 
 nav.secondary {
   .nav-link {
-    padding: 0.3rem;
+    padding: 0 0.3rem;
+  }
+
+  > ul {
+    height: 1.5em;
   }
 }
 
@@ -228,7 +232,7 @@ body.small-nav {
     flex-direction: column;
 
     > ul {
-      justify-content: unset !important;
+      height: auto;
     }
 
     .user-menu, .login-menu {

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 8cfe93313261701fa8ca09c84ab5345b2797f8a2..edd8baec8c691ec2466c1e32f14baa43e6a7dbe9 100644 (file)
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -28,7 +28,7 @@
     </div>
   </nav>
   <nav class='secondary d-flex gap-2 flex-grow-1 align-items-center'>
-    <ul class='nav flex-grow-1 justify-content-end flex-nowrap'>
+    <ul class='nav flex-grow-1'>
       <% if Settings.status != "database_offline" && can?(:index, Issue) %>
         <li class="nav-item">
           <%= link_to issues_path(:status => "open"), :class => header_nav_link_class(issues_path) do %>
@@ -61,7 +61,7 @@
       <li class="nav-item">
         <%= link_to t("layouts.about"), about_path, :class => header_nav_link_class(about_path) %>
       </li>
-      <li id="compact-secondary-nav" class="dropdown nav-item">
+      <li id="compact-secondary-nav" class="dropdown nav-item ms-auto">
         <button class="dropdown-toggle nav-link btn btn-outline-secondary border-0 bg-body text-secondary" type="button" data-bs-toggle="dropdown"><%= t "layouts.more" %></button>
         <ul class="dropdown-menu">
         </ul>