Merge pull request #192 from opf/bug/58106-user-tab-headers-overlap-w…

…hen-header-text-is-long [58106] User tab headers overlap when header text is long
opf · Oct 8, 2024 · 20a43bc · 20a43bc
2 parents 4537b50 + b57b85c
commit 20a43bc
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 1 deletion.
diff --git a/.changeset/gentle-grapes-help.md b/.changeset/gentle-grapes-help.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Avoid overlapping tabs in PageHeader tabNav
diff --git a/app/components/primer/open_project/page_header.html.erb b/app/components/primer/open_project/page_header.html.erb
@@ -30,5 +30,9 @@
   </div>
 
   <%= description %>
-  <%= tab_nav %>
+  <% if tab_nav %>
+    <div class="PageHeader-tabNavBar">
+      <%= tab_nav %>
+    </div>
+  <% end %>
 <% end %>
diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
@@ -47,6 +47,14 @@
   flex: 1 100%;
 }
 
+.PageHeader-tabNavBar {
+  overflow: auto;
+}
+
+.PageHeader-tabNavBar .PageHeader-tabNav {
+  min-width: max-content;
+}
+
 .PageHeader--withTabNav .PageHeader-description {
   margin-bottom: var(--base-size-16);
 }

diff --git a/static/classes.json b/static/classes.json
@@ -483,6 +483,9 @@
   "PageHeader-parentLink": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-tabNavBar": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-title": [
     "Primer::OpenProject::PageHeader"
   ],

diff --git a/test/components/primer/open_project/page_header_test.rb b/test/components/primer/open_project/page_header_test.rb
@@ -229,6 +229,7 @@ def test_renders_tab_nav
     end
 
     assert_selector(".PageHeader.PageHeader--withTabNav")
+    assert_selector(".PageHeader-tabNavBar")
     assert_selector(".PageHeader-tabNav")
     assert_selector(".PageHeader-tabNav .tabnav-tab")
   end