Merge pull request MarkBind#75 from Chng-Zhi-Xuan/335-panel-button

Align Panel buttons on mobile and added responsive CSS

Author: yamgent

src/Panel.vue

@@ -372,16 +372,42 @@
         font-size: 10px !important;
         float: right;
         padding: 3px 8px !important;
+        margin-left: 3px;
+        margin-top: 2px;
     }
 
     .popup-button {
         font-size: 10px !important;
         float: right;
+        margin-top: 2px;
         padding: 3px 8px !important;
-        margin-right: 4px;
     }
 
     .morph {
         display: inline-block;
     }
+
+    /* Bootstrap extra small(xs) responsive breakpoint */
+    @media (max-width: 575.98px) {
+
+        .header-wrapper {
+            width: 88%;
+        }
+
+        .button-wrapper {
+            width: 12%;
+        }
+
+        .card-body {
+            padding: 0.5rem;
+        }
+
+        .card-collapse > hr {
+            margin-top: 1.5rem;
+        }
+
+        .card-header {
+            padding: 0.5rem;
+        }
+    }
 </style>

src/PanelSwitch.vue

@@ -44,5 +44,6 @@
         float: right;
         padding: 3px 8px !important;
         margin-left: 3px;
+        margin-top: 2px;
     }
 </style>