fix : Fix style for header (sqllab) (#11980)

* Fix style for header

* flex

* Refactor

* Remove styled from import

* Change width of container

* Add tooltip and set fixed width of sidebar

* Fix lint

Co-authored-by: Victor Malai <victormalai@Victors-MacBook-Pro.local>

superset-frontend/src/SqlLab/components/TableElement.jsx

@@ -23,6 +23,7 @@ import shortid from 'shortid';
 import { t } from '@superset-ui/core';
 
 import Fade from 'src/common/components/Fade';
+import { Tooltip } from 'src/common/components/Tooltip';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import Link from '../../components/Link';
 import ColumnElement from './ColumnElement';
@@ -200,8 +201,14 @@ class TableElement extends React.PureComponent {
   renderHeader() {
     const { table } = this.props;
     return (
-      <div className="clearfix">
-        <div className="pull-left">
+      <div className="clearfix header-container">
+        <Tooltip
+          id="copy-to-clipboard-tooltip"
+          placement="top"
+          style={{ cursor: 'pointer' }}
+          title={table.name}
+          trigger={['hover']}
+        >
           <a
             href="#"
             className="table-name"
@@ -211,8 +218,9 @@ class TableElement extends React.PureComponent {
           >
             <strong>{table.name}</strong>
           </a>
-        </div>
-        <div className="pull-right">
+        </Tooltip>
+
+        <div className="pull-right header-right-side">
           {table.isMetadataLoading || table.isExtraMetadataLoading ? (
             <Loading position="inline" />
           ) : (