fix recently accessed overflow problems (#18726) (#18927)

elastic · May 8, 2018 · 7564c26 · 7564c26
1 parent 39ca96f
commit 7564c26
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
@@ -27,7 +27,7 @@ exports[`render 1`] = `
     gutterSize="l"
     justifyContent="spaceBetween"
     responsive={true}
-    wrap={false}
+    wrap={true}
   >
     <EuiFlexItem
       className="recentlyAccessedFlexItem"
@@ -56,14 +56,19 @@ exports[`render 1`] = `
               }
             }
           >
-            <EuiLink
-              className="recentlyAccessedLongLink"
-              color="primary"
-              href="link0"
-              type="button"
+            <EuiToolTip
+              content="label0"
+              position="bottom"
             >
-              label0
-            </EuiLink>
+              <EuiLink
+                className="recentlyAccessedLongLink"
+                color="primary"
+                href="link0"
+                type="button"
+              >
+                label0
+              </EuiLink>
+            </EuiToolTip>
           </EuiFlexItem>
         </React.Fragment>
         <React.Fragment
@@ -94,14 +99,19 @@ exports[`render 1`] = `
               }
             }
           >
-            <EuiLink
-              className="recentlyAccessedLongLink"
-              color="primary"
-              href="link1"
-              type="button"
+            <EuiToolTip
+              content="label1"
+              position="bottom"
             >
-              label1
-            </EuiLink>
+              <EuiLink
+                className="recentlyAccessedLongLink"
+                color="primary"
+                href="link1"
+                type="button"
+              >
+                label1
+              </EuiLink>
+            </EuiToolTip>
           </EuiFlexItem>
         </React.Fragment>
       </EuiFlexGroup>

diff --git a/src/core_plugins/kibana/public/home/components/recently_accessed.js b/src/core_plugins/kibana/public/home/components/recently_accessed.js
@@ -12,6 +12,7 @@ import {
   EuiPopover,
   EuiIcon,
   EuiSpacer,
+  EuiToolTip,
 } from '@elastic/eui';
 
 export const NUM_LONG_LINKS = 5;
@@ -130,12 +131,17 @@ export class RecentlyAccessed extends Component {
           style={style}
           grow={false}
         >
-          <EuiLink
-            className="recentlyAccessedLongLink"
-            href={recentlyAccessedItem.link}
+          <EuiToolTip
+            position="bottom"
+            content={recentlyAccessedItem.label}
           >
-            {recentlyAccessedItem.label}
-          </EuiLink>
+            <EuiLink
+              className="recentlyAccessedLongLink"
+              href={recentlyAccessedItem.link}
+            >
+              {recentlyAccessedItem.label}
+            </EuiLink>
+          </EuiToolTip>
         </EuiFlexItem>
       </React.Fragment>
     );
@@ -178,7 +184,7 @@ export class RecentlyAccessed extends Component {
 
         <EuiSpacer size="s"/>
 
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" wrap>
           <EuiFlexItem grow={false} className="recentlyAccessedFlexItem">
             <EuiFlexGroup>
               {this.renderRecentlyAccessed()}

diff --git a/src/core_plugins/kibana/public/home/components/recently_accessed.less b/src/core_plugins/kibana/public/home/components/recently_accessed.less
@@ -7,6 +7,11 @@
 .recentlyAccessedItem {
   overflow: hidden;
   max-width: 300px;
+
+  .euiToolTipAnchor {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .recentlyAccessedLongLink {