Better responsive

src/components/ContentSelection.vue

@@ -127,7 +127,7 @@
         }
 
         .tag {
-          margin-top: 10px;
+          margin: 10px;
         }
       }
     }

src/components/InstanceCard.vue

@@ -167,7 +167,12 @@
 
       .tags {
         display: flex;
+        flex-wrap: wrap;
         margin-top: auto;
+
+        .tag {
+          margin-bottom: 5px;
+        }
       }
     }
 

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;
 }

src/views/Help.vue

@@ -179,7 +179,7 @@
         }
 
         .image-block {
-          margin: 40px 0;
+          margin: 40px 0 !important;
         }
       }
     }

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;
       }