From a7b30ce45a18f96329c22d55a95168a391e099ef Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 6 Nov 2019 10:47:02 +0100
Subject: [PATCH] Better instances page responsive

---
 src/components/InstancesList.vue |  7 +++++++
 src/scss/main.scss               |  1 -
 src/views/Instances.vue          | 12 ++++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/InstancesList.vue b/src/components/InstancesList.vue
index 6392074..4b5f798 100644
--- a/src/components/InstancesList.vue
+++ b/src/components/InstancesList.vue
@@ -270,6 +270,7 @@
         }
 
         .btn-group-toggle {
+
           .btn {
             display: flex;
             align-items: center;
@@ -311,6 +312,12 @@
               font-size: 15px;
             }
           }
+
+          .btn-group-toggle {
+            .btn {
+              padding: 0 8px;
+            }
+          }
         }
       }
     }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 0778ce5..ee1e4d3 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -192,7 +192,6 @@ p > a {
 
     .brand-title {
       height: 26px;
-      margin-left: 5px;
     }
   }
 }
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index 86c15fd..0dab37d 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -100,12 +100,20 @@
       .block-with-image {
         flex-direction: column;
 
+        & > * {
+          margin-right: 0;
+        }
+
         &.step-2 {
           flex-direction: column-reverse;
         }
 
-        img {
-          margin-bottom: 20px;
+        & > div {
+          img {
+            margin-bottom: 20px;
+            width: 100%;
+            height: auto;
+          }
         }
       }
     }