fix: mobile issue with panel split

examples/web/index.css

@@ -385,6 +385,7 @@ p {
     -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
     -khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
     -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
+    margin-top: 30px;
     max-width: 100%;
     padding: 24px 24px 24px 24px;
     text-align: left;
@@ -394,17 +395,17 @@ p {
     -moz-transform: scale(0.96);
     -khtml-transform: scale(0.96);
     -webkit-transform: scale(0.96);
-    margin-top: 30px;
     transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     width: 480px;
 }
 
 .modal-container.visible > .modal {
+    margin-top: 0px;
     pointer-events: all;
     transform: scale(1);
     -o-transform: scale(1);
@@ -412,13 +413,12 @@ p {
     -moz-transform: scale(1);
     -khtml-transform: scale(1);
     -webkit-transform: scale(1);
-    margin-top: 0px;
     transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
-    -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+    -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 .modal-container > .modal .modal-top-buttons {
@@ -451,9 +451,9 @@ p {
 }
 
 .modal-container > .modal .modal-buttons > .button.simple {
+    display: inline-block;
     margin-right: 12px;
     min-width: 120px;
-    display: inline-block;
 }
 
 .modal-container > .modal .modal-buttons > .button.simple:last-child {

examples/web/react/components/panel-split/panel-split.css

@@ -2,6 +2,12 @@
     display: flex;
 }
 
+@media only screen and (max-width: 1120px) {
+    .panel-split {
+        flex-direction: column;
+    }
+}
+
 .panel-split > .side-left {
     display: flex;
     flex: 1 0;
@@ -15,3 +21,10 @@
     min-width: 580px;
     padding: 0px 24px 0px 24px;
 }
+
+@media only screen and (max-width: 1120px) {
+    .panel-split > .side-right {
+        min-width: unset;
+        padding: 0px 0px 0px 0px;
+    }
+}