From ab87b13eed7d16796115e24cc8c4e96c0e63e1a3 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <thomas.nordquist@viison.com>
Date: Sun, 13 Jan 2019 01:48:43 +0100
Subject: [PATCH] Fix scrollbars for windows

---
 app/index.html                               | 13 +++++++++++++
 app/src/components/Sidebar/ValueRenderer.tsx |  6 ++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/index.html b/app/index.html
index 9e1ca6e..dc5cc0d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -14,6 +14,19 @@
             50%  {background-color: #3f51b5;}
             100% {background-color: inherit;}
           }
+
+          ::-webkit-scrollbar {
+              width: 8px;
+          }
+
+          ::-webkit-scrollbar-track {
+              -webkit-box-shadow: inset 0 0 6px rgba(30,30,30,0.3);
+          }
+
+          ::-webkit-scrollbar-thumb {
+              background-color: rgba(140,140,140,0.8);
+              #-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
+          }
         </style>
         <script src="http://localhost:35729/livereload.js"></script>
     </head>
diff --git a/app/src/components/Sidebar/ValueRenderer.tsx b/app/src/components/Sidebar/ValueRenderer.tsx
index 402bb40..22e5470 100644
--- a/app/src/components/Sidebar/ValueRenderer.tsx
+++ b/app/src/components/Sidebar/ValueRenderer.tsx
@@ -51,11 +51,13 @@ class ValueRenderer extends React.Component<Props, {}> {
       backgroundColor: 'rgba(80, 80, 80, 0.6)',
       wordBreak: 'break-all',
       width: '100%',
-      overflow: 'scroll',
+      overflowX: 'scroll',
+      overflowY: 'clip',
       display: 'block',
       lineHeight: '1.2em',
       padding: '12px 5px 12px 5px',
-      color: this.props.theme.palette.text.primary
+      maxWidth: '40vw',
+      color: this.props.theme.palette.text.primary,
     }
 
     return <pre style={style}><code>{value}</code></pre>