From dd0c1044d0c928f9360b9084485bf1c65eac69e7 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 10 Dec 2020 16:15:01 +0100
Subject: [PATCH] improve responsive view

---
 examples/Components/Banner/index.vue  |  4 +++-
 examples/Components/Banner/style.scss | 10 +++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/examples/Components/Banner/index.vue b/examples/Components/Banner/index.vue
index e313eab7..94139662 100644
--- a/examples/Components/Banner/index.vue
+++ b/examples/Components/Banner/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="banner">
-    We’re about to release <a href="https://blog.ueber.io/post/our-plan-for-tiptap-2/">tiptap 2</a>. Become a sponsor to get early access!
+    <span class="banner__message">
+      We’re about to release <a href="https://blog.ueber.io/post/our-plan-for-tiptap-2/">tiptap 2</a>. Become a sponsor to get early access!
+    </span>
     <a href="https://github.com/sponsors/ueberdosis" class="banner__action">
       Sponsor 💖
     </a>
diff --git a/examples/Components/Banner/style.scss b/examples/Components/Banner/style.scss
index 7ba6001d..c41da609 100644
--- a/examples/Components/Banner/style.scss
+++ b/examples/Components/Banner/style.scss
@@ -6,9 +6,10 @@
   color: $color-white;
   border-bottom: 1px solid $color-grey;
   text-align: center;
-  padding: 1rem;
+  padding: 0.5rem 1rem;
 
   &__action {
+    display: inline-block;
     background-color: $color-white;
     transition: 0.1s ease-in-out all;
     color: $color-black;
@@ -16,10 +17,17 @@
     padding: 0.4rem 0.7rem;
     margin: 0.5rem;
     border-radius: 5px;
+    white-space: nowrap;
 
     &:hover {
       background-color: $color-grey;
     }
   }
+
+  &__message {
+    @media all and (max-width: 600px) {
+      display: block;
+    }
+  }
 }