fix[#50499]: Fix back button and title wrapping on small screen

Author: dominic-braeunlein

app/components/primer/open_project/page_header.html.erb

@@ -1,7 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= breadcrumbs %>
-  <%= back_button %>
-  <%= title %>
+  <div class="PageHeader-titleBar">
+    <%= back_button %>
+    <%= title %>
+    <%= actions %>
+  </div>
   <%= description %>
-  <%= actions %>
 <% end %>

app/components/primer/open_project/page_header.pcss

@@ -5,20 +5,24 @@
   padding-bottom: var(--stack-padding-condensed);
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
-  flex-flow: row wrap;
-  justify-content: flex-end; /* Keep actions right aligned. */
-  align-items: baseline; /* Keep back button vertically aligned. */
+  flex-flow: column;
 
   @media (max-width: 767.98px) {
     border-bottom: 0;
   }
 }
 
+.PageHeader-titleBar {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: baseline; /* Keep back button vertically aligned. */
+}
+
 .PageHeader-title {
   font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
-  order: 0;
 }
 
 .PageHeader-title--large {
@@ -30,15 +34,12 @@
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
   flex: 1 100%;
-  order: 2;
 }
 
 /* Add 1 or 2 buttons to the right of the heading */
 .PageHeader-actions {
   margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
-  align-self: center;
   justify-content: flex-end;
-  order: 1;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);

previews/primer/open_project/page_header_preview.rb

@@ -52,7 +52,7 @@ def back_button_and_breadcrumbs
           "test"
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title() { "Hello" }
+          header.with_title() { "Hello this is a long title for testing" }
           header.with_back_button(href: "#", 'aria-label': "Back")
           header.with_breadcrumbs(breadcrumb_items)
         end

previews/primer/open_project/page_header_preview/actions.html.erb

@@ -1,10 +1,11 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
   <% component.with_title(tag: :h1) do %>
-    A title
+    Hello this is a long title for testing
   <% end %>
   <% component.with_description do %>
     A description with actions
   <% end %>
+  <% component.with_back_button(href: "#", 'aria-label': "Back") %>
   <% component.with_actions do %>
     <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
       <% component.with_show_button { "Menu" } %>