UX: improve mobile table editor button location (#25426)

app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js

@@ -22,6 +22,7 @@ export default {
       const siteSettings = owner.lookup("service:site-settings");
       const session = owner.lookup("service:session");
       const site = owner.lookup("service:site");
+      const capabilities = owner.lookup("service:capabilities");
       const modal = owner.lookup("service:modal");
       // will eventually just be called lightbox
       const lightboxService = owner.lookup("service:lightbox");
@@ -118,7 +119,7 @@ export default {
           "btn-default",
           "btn",
           "btn-icon",
-          "no-text",
+          ...(props.label ? ["no-text"] : []),
         ];
 
         openPopupBtn.classList.add(...defaultClasses);
@@ -131,11 +132,18 @@ export default {
           openPopupBtn.title = I18n.t(props.title);
         }
 
+        if (props.label && capabilities.touch) {
+          openPopupBtn.innerHTML = `
+          <span class="d-button-label">
+            ${I18n.t(props.label)}
+          </div>`;
+        }
+
         if (props.icon) {
           const icon = create(
             iconNode(props.icon.name, { class: props.icon?.class })
           );
-          openPopupBtn.append(icon);
+          openPopupBtn.prepend(icon);
         }
 
         return openPopupBtn;
@@ -180,6 +188,7 @@ export default {
           const tableEditorBtn = _createButton({
             classes: ["btn-edit-table"],
             title: "table_builder.edit.btn_edit",
+            label: "table_builder.edit.btn_edit",
             icon: {
               name: "pencil-alt",
               class: "edit-table-icon",

app/assets/stylesheets/common/base/topic-post.scss

@@ -1683,12 +1683,6 @@ iframe {
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   display: block;
   position: relative;
-
-  &__buttons {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-  }
 }
 
 .fullscreen-table-modal .modal-inner-container,

app/assets/stylesheets/common/table-builder/insert-table-modal.scss

@@ -45,6 +45,12 @@
     align-items: center;
     justify-content: space-between;
 
+    .primary-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
     .secondary-actions {
       display: flex;
       align-items: center;

app/assets/stylesheets/common/table-builder/table-edit-decorator.scss

@@ -10,27 +10,23 @@
   opacity: 100%;
 }
 
-.mobile-view {
-  .btn-edit-table {
-    display: none;
-    z-index: 2;
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
+.fullscreen-table-wrapper {
+  .discourse-no-touch & {
+    &__buttons {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+    }
   }
 
-  .fullscreen-table-wrapper {
-    position: relative;
+  .discourse-touch & {
+    display: flex;
+    flex-direction: column-reverse;
+    padding-bottom: 0.5em;
 
-    &:hover {
-      table {
-        opacity: 0.5;
-      }
-
-      .btn-edit-table {
-        display: block;
-        z-index: 2;
-      }
+    .open-popup-link {
+      left: 0;
+      margin: 0;
     }
   }
 }