(superset) branch 6.0 updated: fix(dashboard): Anchor link positions (#34843)

[jl...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

jli pushed a commit to branch 6.0
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/6.0 by this push:
     new 37347525e7 fix(dashboard): Anchor link positions (#34843)
37347525e7 is described below

commit 37347525e797bebf51825e9705f5c63278fc7a5c
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Tue Aug 26 17:20:09 2025 +0200

    fix(dashboard): Anchor link positions (#34843)
    
    (cherry picked from commit 97b35a4640a4eb23f8b6da678a3121677308cd0c)
---
 .../src/components/EditableTitle/index.tsx            |  6 ++++--
 .../src/components/CopyToClipboard/index.tsx          | 11 +++++++++--
 .../dashboard/components/gridComponents/Header.jsx    | 12 ++++++++++++
 .../src/dashboard/components/gridComponents/Tab.jsx   | 19 ++++++++++++++++---
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
index dedb0a6660..04888923be 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
@@ -34,8 +34,10 @@ const StyledEditableTitle = styled.span<{
   canEdit: boolean;
 }>`
   &.editable-title {
-    display: inline-block;
-    width: 100%;
+    display: inline;
+    &.editable-title--editing {
+      width: 100%;
+    }
 
     input,
     textarea {
diff --git a/superset-frontend/src/components/CopyToClipboard/index.tsx b/superset-frontend/src/components/CopyToClipboard/index.tsx
index 92263d261f..d790fd05a8 100644
--- a/superset-frontend/src/components/CopyToClipboard/index.tsx
+++ b/superset-frontend/src/components/CopyToClipboard/index.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Component, cloneElement, ReactElement } from 'react';
-import { t } from '@superset-ui/core';
+import { t, css, SupersetTheme } from '@superset-ui/core';
 import copyTextToClipboard from 'src/utils/copy';
 import { Tooltip } from '@superset-ui/core/components';
 import withToasts from '../MessageToasts/withToasts';
@@ -104,7 +104,14 @@ class CopyToClip extends Component<CopyToClipboardProps> {
     return (
       <span css={{ display: 'inline-flex', alignItems: 'center' }}>
         {this.props.shouldShowText && this.props.text && (
-          <span data-test="short-url">{this.props.text}</span>
+          <span
+            data-test="short-url"
+            css={(theme: SupersetTheme) => css`
+              margin-right: ${theme.sizeUnit}px;
+            `}
+          >
+            {this.props.text}
+          </span>
         )}
         {this.renderTooltip('pointer')}
       </span>
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
index 6c2e304c58..b9e7e71a6c 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
@@ -75,6 +75,18 @@ const HeaderStyles = styled.div`
       font-size: ${theme.fontSizeXXL}px;
     }
 
+    .anchor-link-container {
+      display: inline;
+      line-height: 0;
+      vertical-align: bottom; /* trick to align the anchor with text */
+      opacity: 0;
+      transition: opacity ${theme.motionDurationMid} ease-in-out;
+    }
+
+    &:hover .anchor-link-container {
+      opacity: 1;
+    }
+
     .dashboard--editing .dashboard-grid & {
       &:after {
         border: 1px dashed transparent;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
index e6357d04a9..900d658cca 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
@@ -79,10 +79,23 @@ const defaultProps = {
 
 const TabTitleContainer = styled.div`
   ${({ isHighlighted, theme: { sizeUnit, colorPrimaryBg } }) => `
-    padding: ${sizeUnit}px ${sizeUnit * 8}px ${sizeUnit}px ${sizeUnit * 2}px;
-    margin: ${-sizeUnit}px ${sizeUnit * -2}px;
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    margin: 0 ${sizeUnit * 2}px;
     transition: box-shadow 0.2s ease-in-out;
-    ${isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};`}
+    ${isHighlighted ? `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};` : ''}
+
+    .anchor-link-container {
+      position: absolute;
+      left: 100%;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover .anchor-link-container {
+      opacity: 1;
+    }
   `}
 `;