Improve visility of hevering URL

- Add top and bottom padding
- Add border lines
- Truncate long URL using ellipsis

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>
     );
   }