Merge pull request #2657 from basecamp/mobile/fix-clipped-column-menu

Mobile / Fix clipped column menu

app/javascript/controllers/collapsible_columns_controller.js

@@ -54,6 +54,12 @@ export default class extends Controller {
     }
   }
 
+  frameColumnOnMobile(event) {
+    if (!this.#isDesktop) {
+      event.currentTarget.scrollIntoView({ behavior: "smooth", inline: "center" })
+    }
+  }
+
   async #restoreColumnsDisablingTransitions() {
     this.#disableTransitions()
     this.#restoreColumns()

app/javascript/controllers/dialog_controller.js

@@ -7,7 +7,8 @@ export default class extends Controller {
   static values = {
     modal: { type: Boolean, default: false },
     sizing: { type: Boolean, default: true },
-    autoOpen: { type: Boolean, default: false }
+    autoOpen: { type: Boolean, default: false },
+    orient: { type: Boolean, default: true }
   }
 
   connect() {
@@ -26,7 +27,9 @@ export default class extends Controller {
       this.dialogTarget.showModal()
     } else {
       this.dialogTarget.show()
-      orient({ target: this.dialogTarget, anchor: this.element })
+      if (this.orientValue) {
+        orient({ target: this.dialogTarget, anchor: this.element })
+      }
     }
 
     this.loadLazyFrames()

app/views/boards/show/_column.html.erb

@@ -4,7 +4,7 @@
     drag_and_strum_target: "container",
     collapsible_columns_target: "column",
     controller: "clicker",
-    action: "turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn"
+    action: "turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn dialog:show->collapsible-columns#frameColumnOnMobile"
   } do %>
   <header class="cards__header">
     <%= render "boards/show/menu/column", column: column %>

app/views/boards/show/menu/_column.html.erb

@@ -1,4 +1,4 @@
-<div id="<%= dom_id(column, :menu) %>" class="cards__menu" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+<div id="<%= dom_id(column, :menu) %>" class="cards__menu" data-controller="dialog" data-dialog-orient-value="false" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
   <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open">
     <%= icon_tag "menu-dots-horizontal", class: "translucent" %>
     <span class="for-screen-reader">Column options</span>