Tidy inline docs and added sdk support table.

src/styles/_components.scss

@@ -28,7 +28,8 @@
   height: 100%;
 }
 
-.maputnik-input-block:hover {
+.maputnik-input-block:hover,
+.maputnik-filter-editor-compound-select:hover {
   .maputnik-doc-button {
     opacity: 1;
     pointer-events: all;
@@ -68,14 +69,16 @@
   &-button {
     opacity: 0;
     pointer-events: none;
-    background: #000;
+    background: $color-black;
     color: white;
-    border: solid 1px #555;
-    border-radius: 100px;
+    border: none;
+    padding: 0;
+
+    svg {
+      pointer-events: none;
+    }
 
     &--open {
-      background: white;
-      color: black;
       opacity: 1;
       pointer-events: all;
     }
@@ -87,7 +90,8 @@
   background-color: $color-gray;
   padding: $margin-2;
   font-size: 12px;
-  margin-top: $margin-2;
+  margin-top: $margin-3;
+  line-height: 1.5;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {

src/styles/_input.scss

@@ -193,3 +193,20 @@
   position: relative;
   overflow: hidden;
 }
+
+.sdk-support {
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.sdk-support__table {
+  width: 100%;
+  margin-top: $margin-3;
+
+  td, th {
+    border: solid 1px $color-midgray;
+    padding: 4px 6px;
+    white-space: nowrap;
+  }
+}

src/styles/_layout.scss

@@ -32,7 +32,7 @@
     top: $toolbar-height + $toolbar-offset;
     left: 200px;
     z-index: 1;
-    width: 350px;
+    width: 370px;
     background-color: $color-black;
   }
 

src/styles/_modal.scss

@@ -108,6 +108,11 @@
   background-color: $color-midgray;
 }
 
+.maputnik-add-modal {
+  width: 400px;
+  max-width: 100%;
+}
+
 .maputnik-add-layer {
   @extend .clearfix;
 }