Merge pull request #1587 from basecamp/fizzy-menu-fix

Attempt to fix overflow in mobile safari

app/assets/stylesheets/nav.css

@@ -55,7 +55,7 @@
   .nav__menu.popup {
     --panel-border-color: var(--color-selected-dark);
     --panel-border-radius: 1.4em;
-    --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
+    --panel-padding: var(--block-space);
     --panel-size: 45ch;
     --popup-display: grid;
     --nav-section-gap: 2px;
@@ -68,6 +68,7 @@
     grid-template-rows: auto 1fr auto;
     gap: var(--nav-section-gap);
     overflow: hidden;
+    padding-block-end: 0;
     scrollbar-gutter: stable both-edges;
   }
 
@@ -83,10 +84,48 @@
 
   .nav__close {
     @media (any-hover: hover) {
-      display: none;
+      display: none !important;
     }
   }
 
+  .nav__header {
+    --actions-width: 2rem;
+
+    display: grid;
+    grid-template-columns: var(--actions-width) 1fr var(--actions-width);
+    grid-template-areas:
+      "actions-start title actions-end";
+    justify-items: center;
+  }
+
+  .nav__header-actions {
+    display: flex;
+    font-size: var(--text-x-small);
+    gap: var(--inline-space);
+    inline-size: var(--actions-width);
+    min-inline-size: fit-content;
+  }
+
+  .nav__header-actions--end {
+    grid-area: actions-end;
+    justify-content: flex-end;
+    margin-inline-start: auto;
+  }
+
+  .nav__header-actions--start {
+    grid-area: actions-start;
+    margin-inline-end: auto;
+  }
+
+  .nav__header-title {
+    color: inherit;
+    grid-area: title;
+    justify-content: center;
+    margin: auto;
+    min-inline-size: 0;
+    text-align: center;
+  }
+
   .nav__hotkeys {
     --gap: 8px;
 

app/assets/stylesheets/popup.css

@@ -9,8 +9,8 @@
     --popup-display: flex;
 
     inset: 0 auto auto 50%;
-    min-inline-size: min(25ch, calc(100dvw - var(--block-space-double)));
-    max-inline-size: min(55ch, calc(100dvw - var(--block-space-double)));
+    min-inline-size: min(25ch, calc(100vw - (var(--panel-padding) * 2)));
+    max-inline-size: min(55ch, calc(100vw - (var(--panel-padding) * 2)));
     overflow: auto;
     position: absolute;
     transform: translateX(-50%);

app/views/my/menus/_jump.html.erb

@@ -1,15 +1,20 @@
 <div class="flex gap">
   <div class="flex flex-column full-width justify-center gap-half">
-    <% if Current.user.identity.memberships.many? %>
-      <strong class="center"><%= Account.sole.name %></strong>
-    <% end %>
+    <div class="nav__header">
+      <% if Current.user.identity.memberships.many? %>
+        <div class="nav__header-title max-width">
+          <div class="overflow-ellipsis"><strong><%= Account.sole.name %></strong></div>
+        </div>
+      <% end %>
+      <div class="nav__header-actions nav__header-actions--end nav__close">
+        <button class="btn txt-xx-small" data-action="dialog#close">
+          <%= icon_tag "close" %>
+          <span class="for-screen-reader">Close menu</span>
+        </button>
+      </div>
+    </div>
     <%= jump_field_tag %>
   </div>
-
-  <button class="nav__close btn borderless txt-small" data-action="dialog#close">
-    <%= icon_tag "close" %>
-    <span class="for-screen-reader">Close menu</span>
-  </button>
 </div>
 
 <div class="nav__scroll-container">