Do not leak tooltips outside of the map viewport

packages/frontend/src/components/Node/Location.css

@@ -49,8 +49,8 @@
 .Node-Location-details {
   min-width: 335px;
   position: absolute;
-  left: 16px;
-  top: -4px;
+  /*left: 16px;
+  top: -4px;*/
   font-family: monospace, sans-serif;
   background: #222;
   color: #fff;
@@ -58,6 +58,26 @@
   border-collapse: collapse;
 }
 
+.Node-Location-quarter0 .Node-Location-details {
+  left: 16px;
+  top: -4px;
+}
+
+.Node-Location-quarter1 .Node-Location-details {
+  right: 16px;
+  top: -4px;
+}
+
+.Node-Location-quarter2 .Node-Location-details {
+  left: 16px;
+  bottom: -4px;
+}
+
+.Node-Location-quarter3 .Node-Location-details {
+  right: 16px;
+  bottom: -4px;
+}
+
 .Node-Location-details td {
   text-align: left;
   padding: 0.5em 1em;
@@ -75,10 +95,10 @@
 
 @keyframes ping {
   from {
-    left: 2px;
-    right: 2px;
-    width: 0;
-    height: 0;
+    left: -1px;
+    top: -1px;
+    width: 6px;
+    height: 6px;
     border-color: rgba(255,255,255,1);
   }
 

packages/frontend/src/components/Node/Location.tsx

@@ -19,6 +19,7 @@ namespace Location {
   export interface Position {
     left: number;
     top: number;
+    quarter: 0 | 1 | 2 | 3;
   }
 
   export interface State {
@@ -30,7 +31,7 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
   public readonly state = { hover: false };
 
   public render() {
-    const { left, top, location } = this.props;
+    const { left, top, quarter, location } = this.props;
     const height = this.props.blockDetails[0];
     const propagationTime = this.props.blockDetails[4];
 
@@ -38,7 +39,7 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
       return null;
     }
 
-    let className = 'Node-Location';
+    let className = `Node-Location Node-Location-quarter${quarter}`;
 
     if (propagationTime != null) {
       className += ' Node-Location-synced';
@@ -61,7 +62,7 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
     const [height, hash, blockTime, blockTimestamp, propagationTime] = this.props.blockDetails;
 
     return (
-      <table className="Node-Location-details">
+      <table className="Node-Location-details Node-Location-details">
         <tbody>
           <tr>
             <td><Icon src={nodeIcon} alt="Node" /></td><td colSpan={5}>{name}</td>