From 116c3f7f8ddf4a55a531c1bab79d341d19679071 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 6 Jan 2025 13:59:48 -0500
Subject: [PATCH] UX: improve table hover states, fix table button margin issue
 (#30585)

---
 .../app/instance-initializers/post-decorations.js         | 6 ++++--
 app/assets/stylesheets/common/base/topic-post.scss        | 8 ++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
index 4e13b65feec..fa7562debd2 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
@@ -119,7 +119,7 @@ export default {
           "btn-default",
           "btn",
           "btn-icon",
-          ...(props.label ? ["no-text"] : []),
+          ...(props.label ? [] : ["no-text"]),
         ];
 
         openPopupBtn.classList.add(...defaultClasses);
@@ -197,7 +197,6 @@ export default {
           const tableEditorBtn = _createButton({
             classes: ["btn-edit-table"],
             title: "table_builder.edit.btn_edit",
-            label: "table_builder.edit.btn_edit",
             icon: {
               name: "pencil",
               class: "edit-table-icon",
@@ -208,6 +207,7 @@ export default {
           table.parentNode.classList.add("fullscreen-table-wrapper");
 
           if (attrs.canEdit) {
+            table.parentNode.classList.add("--editable");
             buttonWrapper.append(tableEditorBtn);
             tableEditorBtn.addEventListener(
               "click",
@@ -229,6 +229,8 @@ export default {
             return;
           }
 
+          table.parentNode.classList.add("--has-overflow");
+
           const expandTableBtn = _createButton({
             classes: ["btn-expand-table"],
             title: "fullscreen_table.expand_btn",
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index c4b39a443f5..6f3107b07bc 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1596,12 +1596,16 @@ iframe {
 
 html.discourse-no-touch .fullscreen-table-wrapper:hover {
   border-radius: 5px;
-  box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
-    0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
 
   .open-popup-link {
     opacity: 100%;
   }
+
+  &.--has-overflow,
+  &.--editable {
+    box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
+      0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
+  }
 }
 
 .read-state {