From 14969a8c0449491091ddbebad71927e857336f56 Mon Sep 17 00:00:00 2001
From: Yuya Ochiai <yuya0321@gmail.com>
Date: Tue, 29 Nov 2016 22:01:18 +0900
Subject: [PATCH] Improve visility of hevering URL

- Add top and bottom padding
- Add border lines
- Truncate long URL using ellipsis
---
 src/browser/components/HoveringURL.jsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/browser/components/HoveringURL.jsx b/src/browser/components/HoveringURL.jsx
index ad71de9a..d15fdff9 100644
--- a/src/browser/components/HoveringURL.jsx
+++ b/src/browser/components/HoveringURL.jsx
@@ -1,25 +1,28 @@
 const React = require('react');
 
-const divStyle = {
+const style = {
+  color: 'gray',
   backgroundColor: 'whitesmoke',
+  maxWidth: '95%',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
   position: 'absolute',
   bottom: 0,
   paddingLeft: 4,
   paddingRight: 16,
-  borderTopRightRadius: 4
-};
-
-const spanStyle = {
-  color: 'gray'
+  paddingTop: 2,
+  paddingBottom: 2,
+  borderTopRightRadius: 4,
+  borderTop: 'solid thin lightgray',
+  borderRight: 'solid thin lightgray'
 };
 
 class HoveringURL extends React.Component {
   render() {
     return (
-      <div style={divStyle}>
-        <span style={spanStyle}>
-          {this.props.targetURL}
-        </span>
+      <div style={style}>
+        {this.props.targetURL}
       </div>
     );
   }