From 87ed13ac7e47945e3c5e1ed94f5aade99d2cc5ae Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Thu, 4 Aug 2022 17:05:44 +0300
Subject: move tasks from sila-dev, lysak

---
 src/views/_sila/Operations/Kvm/KvmConsole.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to 'src/views/_sila/Operations/Kvm/KvmConsole.vue')

diff --git a/src/views/_sila/Operations/Kvm/KvmConsole.vue b/src/views/_sila/Operations/Kvm/KvmConsole.vue
index 50cbff7f..603aa115 100644
--- a/src/views/_sila/Operations/Kvm/KvmConsole.vue
+++ b/src/views/_sila/Operations/Kvm/KvmConsole.vue
@@ -1,8 +1,12 @@
 <template>
   <div :class="marginClass">
     <div ref="toolbar" class="kvm-toolbar">
-      <b-row class="d-flex">
-        <b-col class="d-flex flex-column justify-content-end" cols="4">
+      <b-row class="d-flex flex-column flex-sm-row">
+        <b-col
+          class="d-flex flex-column justify-content-end console-title"
+          style="min-width: 105px"
+          cols="3"
+        >
           <dl class="mb-2" sm="2" md="2">
             <dt class="d-inline font-weight-bold mr-1">
               {{ $t('pageKvm.status') }}:
@@ -14,9 +18,10 @@
           </dl>
         </b-col>
 
-        <b-col class="d-flex justify-content-end pr-1">
+        <b-col class="d-flex justify-content-end pr-1 flex-column flex-sm-row">
           <b-button
             v-if="isConnected"
+            class="console-title console-button"
             variant="link"
             type="button"
             @click="sendCtrlAltDel"
@@ -26,6 +31,7 @@
           </b-button>
           <b-button
             v-if="!isFullWindow"
+            class="console-title console-button"
             variant="link"
             type="button"
             @click="openConsoleWindow()"
@@ -167,4 +173,16 @@ export default {
 .margin-left-full-window {
   margin-left: 5px;
 }
+
+@media (max-width: 1200px) {
+  .console-title {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .console-button {
+    justify-content: flex-end;
+  }
+}
 </style>
-- 
cgit v1.2.3