InfoPanel: add breakpoints that simplify panel on mobile

src/components/IconGrid/IconGrid.css

@@ -37,12 +37,13 @@
 .grid-item p {
   font-size: 12px;
   line-height: 16px;
-  color: #86838B;
+  color: #86838b;
   margin-top: 12px;
   text-align: center;
 }
 
 .info-box {
+  position: relative;
   display: flex;
   width: 100%;
   height: 0px;
@@ -52,6 +53,16 @@
   overflow: hidden;
 }
 
+@media screen and (max-width: 1023px) {
+  .icon-preview {
+    display: none !important;
+  }
+
+  .icon-usage {
+    padding-left: 10% !important;
+  }
+}
+
 .icon-preview {
   height: 396px;
   width: 30%;
@@ -70,7 +81,7 @@
 
 .icon-usage {
   flex: 1;
-  padding: 56px 0px 56px;
+  padding: 56px 10% 56px 0;
 }
 
 .snippet {
@@ -86,6 +97,7 @@
   padding: 0;
   height: 24px;
   float: right;
+  cursor: pointer;
 }
 
 .button-row {
@@ -99,19 +111,18 @@
   margin: 0 48px 0 0;
   padding: 0;
   height: 48px;
+  cursor: pointer;
 }
 
 .button-row button svg {
   margin-right: 8px;
 }
 
-.close {
-  width: 10%;
-  text-align: end;
-}
-
 .close-icon {
-  margin: 24px;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  text-align: end;
   cursor: pointer;
 }