Truncating is a challenge in this world we shouldnt have to face

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

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>