From 59ed6d7b3e1d1c05c3c5ea511b6e1a5c5fa19421 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 19 Jun 2024 18:58:19 -0400
Subject: [PATCH] UX: show image caption button on image hover (#670)

---
 .../modules/ai-helper/common/ai-helper.scss   | 70 +++++++++++--------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
index 02cd18ec..f634988a 100644
--- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
+++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -482,37 +482,49 @@
 }
 
 // AI Image Caption Feature:
-.image-wrapper .button-wrapper {
-  .generate-caption {
-    background: var(--tertiary-low);
-    color: var(--tertiary);
-    box-shadow: var(--shadow-dropdown);
-    position: absolute;
-    white-space: nowrap;
-    top: -3.15rem;
-    left: 0.75rem;
-    padding: 0.5em 0.75em;
-    transition: all 0.25s ease;
+.image-wrapper {
+  .button-wrapper {
+    .generate-caption {
+      background: var(--tertiary-low);
+      color: var(--tertiary);
+      box-shadow: var(--shadow-dropdown);
+      position: absolute;
+      white-space: nowrap;
+      top: -2rem;
+      left: 0.35rem;
+      padding: 0.33em 0.75em;
+      transition: all 0.25s ease;
+      .discourse-no-touch & {
+        display: none;
+      }
 
-    .d-icon {
-      margin-right: 0.25rem;
+      .d-icon {
+        margin-right: 0.25rem;
+      }
+
+      &:active {
+        box-shadow: none;
+      }
+
+      &:hover,
+      &:focus {
+        background: var(--tertiary-400);
+        color: var(--tertiary-hover);
+        cursor: pointer;
+      }
+
+      &.disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
     }
-
-    &:active {
-      box-shadow: none;
-    }
-
-    &:hover,
-    &:focus {
-      background: var(--tertiary-400);
-      color: var(--tertiary-hover);
-      cursor: pointer;
-    }
-
-    &.disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-      opacity: 0.7;
+  }
+  .discourse-no-touch & {
+    &:hover {
+      .button-wrapper .generate-caption {
+        display: block;
+      }
     }
   }
 }