Improve spacing around header actions

Problem:

When the title of the page is unusually long,
it can wrap onto multiple lines.
Because the action button is aligned to the bottom of the header,
the action button is then shifted downwards.
This creates an awkward whitespace on the page,
and ruins the alignment.

Solution:

Align the button and header by their baseline,
so the button stays in the same place regardless of whether the header
wraps lines.

Also, add a margin to the left of the header action buttons,
so they can keep a bit of distance from the page header
even when the header is unusually long.

CHANGELOG.md

@@ -26,6 +26,7 @@
 * [#309] [UI] Fix layout issue in datetime pickers where months and years
   would not wrap correctly.
 * [#306] [UI] Wrap long text lines (on word breaks) on show pages
+* [#214] [UI] Improve header layout when there is a long page title
 * [#259] [BUGFIX] Make installation generator more robust
   by ignoring dynamically generated, unnamed models
 * [#243] [BUGFIX] Fix up a "Show" button on the edit page that was not using the

app/assets/stylesheets/administrate/components/_header.scss

@@ -1,10 +1,14 @@
 .header {
-  align-items: flex-end;
+  align-items: baseline;
   display: flex;
   justify-content: space-between;
   margin-bottom: $base-spacing * 2;
 
   &-heading {
     margin-top: 0;
   }
+
+  &-actions {
+    margin-left: $base-spacing;
+  }
 }

app/views/administrate/application/edit.html.erb

@@ -19,11 +19,13 @@ It displays a header, and renders the `_form` partial to do the heavy lifting.
 
 <header class="header">
   <h1 class="header-heading"><%= content_for(:title) %></h1>
-  <%= link_to(
-    "Show #{page.page_title}",
-    [Administrate::NAMESPACE, page.resource],
-    class: "button",
-  ) %>
+  <div class="header-actions">
+    <%= link_to(
+      "Show #{page.page_title}",
+      [Administrate::NAMESPACE, page.resource],
+      class: "button",
+    ) %>
+  </div>
 </header>
 
 <%= render "form", page: page %>

app/views/administrate/application/index.html.erb

@@ -45,11 +45,13 @@ It renders the `_table` partial to display details about the resources.
 
 <header class="header">
   <h1 class="header-heading"><%= content_for(:title) %></h1>
-  <%= link_to(
-    "New #{page.resource_name.titleize.downcase}",
-    [:new, Administrate::NAMESPACE, page.resource_name],
-    class: "button",
-  ) %>
+  <div class="header-actions">
+    <%= link_to(
+      "New #{page.resource_name.titleize.downcase}",
+      [:new, Administrate::NAMESPACE, page.resource_name],
+      class: "button",
+    ) %>
+  </div>
 </header>
 
 <%= render "collection", collection_presenter: page, resources: resources %>

app/views/administrate/application/new.html.erb

@@ -19,7 +19,9 @@ to do the heavy lifting.
 
 <header class="header">
   <h1 class="header-heading"><%= content_for(:title) %></h1>
-  <%= link_to 'Back', :back, class: "button" %>
+  <div class="header-actions">
+    <%= link_to 'Back', :back, class: "button" %>
+  </div>
 </header>
 
 <%= render 'form', page: page %>

app/views/administrate/application/show.html.erb

@@ -20,11 +20,13 @@ as well as a link to its edit page.
 
 <header class="header">
   <h1 class="header-heading"><%= content_for(:title) %></h1>
-  <%= link_to(
-    "Edit",
-    [:edit, Administrate::NAMESPACE, page.resource],
-    class: "button",
-  ) %>
+  <div class="header-actions">
+    <%= link_to(
+      "Edit",
+      [:edit, Administrate::NAMESPACE, page.resource],
+      class: "button",
+    ) %>
+  </div>
 </header>
 
 <dl>