Merge pull request #361 from open-rpc/fix/add-inspector-split

fix: add inspector split view and updated inspector

package.json

@@ -13,12 +13,12 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@etclabscore/monaco-add-json-schema-diagnostics": "^1.0.3",
-    "@etclabscore/react-monaco-editor": "^1.0.3",
+    "@etclabscore/react-monaco-editor": "^1.0.4",
     "@material-ui/core": "^4.7.2",
     "@material-ui/icons": "^3.0.2",
     "@open-rpc/docs-react": "^1.1.5",
     "@open-rpc/examples": "^1.3.3",
-    "@open-rpc/inspector": "^1.2.10",
+    "@open-rpc/inspector": "^1.3.5",
     "@open-rpc/meta-schema": "^1.7.0",
     "@open-rpc/schema-utils-js": "^1.11.1",
     "@use-it/interval": "^0.1.3",

src/App.css

@@ -1,9 +1,3 @@
-.docs {
-  height: calc(100% - 84px);
-  padding: 10px;
-  overflow-y: scroll;
-  width: 100%;
-}
 .Resizer {
   background: #000;
   opacity: .2;
@@ -44,15 +38,19 @@
   height: 100%;
 }
 
+.playground-splitview > .Resizer.vertical {
+  margin-top: 58px;
+}
+
 .Resizer.vertical:hover {
   border-left: 5px solid rgba(0, 0, 0, 0.5);
   border-right: 5px solid rgba(0, 0, 0, 0.5);
 }
 .Resizer.disabled {
-cursor: not-allowed;
+  cursor: not-allowed;
 }
 .Resizer.disabled:hover {
-border-color: transparent;
+  border-color: transparent;
 }
 
 .react-json-view, .object-key-val, .object-container, .object-content {
@@ -73,7 +71,3 @@ border-color: transparent;
   background: #ddd;
   border-radius: 5px;
 }
-
-.SplitPane {
-  position: relative !important;
-}