Optimize CSS for mobile devices

src/App.vue

@@ -9,7 +9,7 @@
       <EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
     </div>
     <div v-if="!$data.loading">
-      <RefreshSettings :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
+      <RefreshSettings class="refresh-settings" :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
       <Footer />
     </div>
   </div>
@@ -130,6 +130,18 @@ export default {
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
+@media screen and (max-width: 768px) {
+  .main {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .content-wrapper {
+    max-width: 100%;
+  }
+  .refresh-settings {
+    display: none;
+  }
+}
 </style>
 
 <style>

src/components/Endpoint.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="flex ai-center endpoint">
-    <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
-    <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
-    <span>{{ endpoint.name }}</span>
-    <span class="hostname" v-if="hostname">| {{ hostname }}</span>
+    <div class="flex ai-center info">
+      <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
+      <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
+      <span>{{ endpoint.name }}</span>
+      <span class="hostname" v-if="hostname">| {{ hostname }}</span>
+    </div>
     <span class="spacer"></span>
-    <EndpointHistory :results="endpoint.results" />
+    <div class="history">
+      <EndpointHistory :results="endpoint.results" />
+    </div>
   </div>
 </template>
 
@@ -56,4 +60,30 @@ span {
 .spacer {
   flex: 1;
 }
+
+@media screen and (max-width: 768px) {
+  .endpoint {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 5px;
+  }
+  .info {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  .history {
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+  .icon {
+    font-size: 15px;
+  }
+  span {
+    font-size: 15px;
+  }
+  .hostname {
+    display: none;
+  }
+}
 </style>

src/components/EndpointHistory.vue

@@ -47,6 +47,12 @@ export default {
   background-color: var(--orange);
 }
 .grey {
-  background-color: grey;
+  background-color: var(--grey);
+}
+@media screen and (max-width: 768px) {
+  .history {
+    width: 100%;
+    margin-top: 0.4rem
+  }
 }
 </style>

src/components/Header.vue

@@ -26,4 +26,12 @@ h2 {
   margin: 0;
   margin-left: 20px;
 }
+@media screen and (max-width: 768px) {
+  .logo {
+    width: 40px;
+  }
+  h2 {
+    font-size: 1.2rem;
+  }
+}
 </style>

src/components/OverallStatus.vue

@@ -55,4 +55,12 @@ export default {
 span {
   margin-left: 1rem;
 }
+@media screen and (max-width: 768px) {
+  .status-wrapper {
+    font-size: 1rem;
+  }
+  .icon {
+    font-size: 20px;
+  }
+}
 </style>