style: better styling location

apache · May 13, 2021 · 2ad7a47 · 2ad7a47
1 parent dead6f5
commit 2ad7a47
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t } from '@superset-ui/core';
+import { t, css } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/components/Tooltip';
 import { FormLabel } from 'src/components/Form';
@@ -49,7 +49,16 @@ export default class ControlHeader extends React.Component {
   renderOptionalIcons() {
     if (this.props.hovered) {
       return (
-        <span>
+        <span
+          css={theme => css`
+            position: absolute;
+            top: 50%;
+            right: 0;
+            padding-left: ${theme.gridUnit}px;
+            transform: translate(100%, -50%);
+            white-space: nowrap;
+          `}
+        >
           {this.props.description && (
             <span>
               <InfoTooltipWithTrigger
@@ -85,7 +94,13 @@ export default class ControlHeader extends React.Component {
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
-          <FormLabel css={{ marginBottom: 0 }}>
+          <FormLabel
+            css={{
+              marginBottom: 0,
+              position: 'relative',
+              whiteSpace: 'nowrap',
+            }}
+          >
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
               role="button"

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -226,18 +226,6 @@ export class ControlPanelsContainer extends React.Component<ControlPanelsContain
             padding-bottom: 0px;
           }
 
-          .control-label {
-            margin-bottom: 0px;
-            position: relative;
-            span + span {
-              // this is targeting the little info icons
-              position: absolute;
-              top: 50%;
-              right: ${theme.gridUnit * -3}px;
-              transform: translateY(-50%);
-            }
-          }
-
           span.label {
             display: inline-block;
           }