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

2020-01-30 14:19:59 +01:00
parent 89a8183f00
commit d7b3d2b368
2 changed files with 11 additions and 5 deletions
--- 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>