Debug UI CSS improvements

Author: darthfiddler

src/client/debug/debug.css

@@ -7,12 +7,14 @@
  */
 
 .debug-ui {
+  text-align: left;
   min-width: 300px;
   max-width: 400px;
-  overflow: hidden;
+  overflow-y: scroll;
   box-sizing: border-box;
   background: #fefefe;
-  border: 3px solid #ddd;
+  border-left: 1px solid #ddd;
+  box-shadow: -1px 0 10px #aaa;
   position: absolute;
   right: 0;
   top: 0;
@@ -21,7 +23,7 @@
   font-family: monospace;
   font-size: 14px;
   padding: 20px;
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 
 .debug-ui section {

src/client/debug/debug.js

@@ -423,16 +423,16 @@ export class Debug extends React.Component {
             <h3>state</h3>
 
             <section>
-              <pre>
-                <strong>G</strong>:{' '}
-                {JSON.stringify(this.props.gamestate.G, null, 2)}
+              <pre className="json">
+                <strong>ctx</strong>:{' '}
+                {JSON.stringify(this.props.gamestate.ctx, null, 2)}
               </pre>
             </section>
 
             <section>
-              <pre>
-                <strong>ctx</strong>:{' '}
-                {JSON.stringify(this.props.gamestate.ctx, null, 2)}
+              <pre className="json">
+                <strong>G</strong>:{' '}
+                {JSON.stringify(this.props.gamestate.G, null, 2)}
               </pre>
             </section>
           </span>