From 1aa58efe1809fc71a5843638e030c1eb88d3fadc Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 31 Oct 2019 14:28:09 +0100
Subject: [PATCH] Better responsive

---
 src/components/ContentSelection.vue |  2 +-
 src/components/InstanceCard.vue     |  5 +++++
 src/scss/main.scss                  | 14 ++++++++++++--
 src/views/Help.vue                  |  2 +-
 src/views/Home.vue                  |  2 +-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue
index b3a584c..c7bd3f2 100644
--- a/src/components/ContentSelection.vue
+++ b/src/components/ContentSelection.vue
@@ -127,7 +127,7 @@
         }
 
         .tag {
-          margin-top: 10px;
+          margin: 10px;
         }
       }
     }
diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue
index 3abba77..40b4b4a 100644
--- a/src/components/InstanceCard.vue
+++ b/src/components/InstanceCard.vue
@@ -167,7 +167,12 @@
 
       .tags {
         display: flex;
+        flex-wrap: wrap;
         margin-top: auto;
+
+        .tag {
+          margin-bottom: 5px;
+        }
       }
     }
 
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 0c11fc0..69d8168 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -129,7 +129,7 @@ p > a {
   @media screen and (max-width: $small-screen) {
     width: 100% !important;
     min-width: unset !important;
-    padding: 0 5px !important;
+    padding: 5px !important;
   }
 }
 
@@ -240,6 +240,15 @@ p > a {
   & + .bottom-two-columns {
     margin-top: 10px;
   }
+
+  @media screen and (max-width: $small-screen) {
+    width: 100%;
+    margin: 20px auto 0;
+
+    &.citation {
+      margin: 20px auto;
+    }
+  }
 }
 
 .bottom-link-wrapper {
@@ -320,9 +329,10 @@ p > a {
   font-size: 14px;
   min-width: 140px;
   padding: 0 10px;
-  height: 25px;
+  min-height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
+  text-align: center;
   width: fit-content;
 }
diff --git a/src/views/Help.vue b/src/views/Help.vue
index b5e9ece..fb345da 100644
--- a/src/views/Help.vue
+++ b/src/views/Help.vue
@@ -179,7 +179,7 @@
         }
 
         .image-block {
-          margin: 40px 0;
+          margin: 40px 0 !important;
         }
       }
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 792a0ca..28c7533 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -449,7 +449,7 @@
       .discover-instances {
         min-width: 420px;
         width: fit-content;
-        height: 50px;
+        min-height: 50px;
         margin: 50px auto;
         font-size: 20px;
       }