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" />
           ) : (

superset-frontend/src/SqlLab/main.less

@@ -310,8 +310,8 @@ div.Workspace {
   padding: 10px;
 
   .schemaPane {
-    flex: 0 0 300px;
-    max-width: 300px;
+    flex: 0 0 400px;
+    max-width: 400px;
     transition: transform @timing-normal ease-in-out;
   }
 
@@ -451,6 +451,24 @@ div.tablePopover {
 
   .ws-el-controls {
     margin-right: -0.3em;
+    display: flex;
+  }
+
+  .header-container {
+    display: flex;
+
+    .table-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 16px;
+    }
+
+    .header-right-side {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+    }
   }
 }