From d7b3d2b3682235285b3e23637816cb7f068574fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Thu, 30 Jan 2020 14:19:59 +0100
Subject: [PATCH] Truncating is a challenge in this world we shouldnt have to
 face

---
 src/components/VinlottisPage.vue |  5 +++--
 src/ui/Wines.vue                 | 11 ++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 6c5b184..12f3b98 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -89,7 +89,7 @@ export default {
   padding: 0 30px;
 
   @include mobile {
-    padding: 0 20px;
+    padding: 0;
   }
 }
 
@@ -101,7 +101,8 @@ export default {
   width: 75%;
 
   @include mobile {
-    width: 100%;
+    width: calc(100% - 20px);
+    padding: 0;
   }
 }
 
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index 3ac1f15..132de0c 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -16,7 +16,8 @@
           :href="wine.vivinoLink"
           v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
           @click="wineClick(wine)"
-        >Les mer</a>
+          >Les mer</a
+        >
       </li>
     </ol>
   </div>
@@ -104,13 +105,17 @@ ol {
 
 .truncate {
   display: inline-block;
-  max-width: 20vw;
+  max-width: 350px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 
+  &:hover {
+    max-width: initial;
+  }
+
   @include mobile {
-    max-width: calc(75vw - 90px - 62px);
+    max-width: calc(75vw - 177px);
   }
 }
 </style>