From 9083b0a5d041c9456bcba4e671ece302f77cc15b Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Thu, 3 Mar 2022 23:13:41 +0100
Subject: [PATCH] Ghost element needed 10px to max-width to be consistent

Also updated expand icon that requires updates to height, width & color
attribute.
---
 src/components/ui/MovieDescription.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/MovieDescription.vue b/src/components/ui/MovieDescription.vue
index b39e321..20d28e1 100644
--- a/src/components/ui/MovieDescription.vue
+++ b/src/components/ui/MovieDescription.vue
@@ -42,8 +42,11 @@ export default {
       const elementWithoutOverflow = document.createElement("div");
       elementWithoutOverflow.setAttribute(
         "style",
-        `max-width: ${width}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};`
+        `max-width: ${Math.ceil(
+          width + 10
+        )}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};`
       );
+      // Don't know why need to add 10px to width, but works out perfectly
 
       elementWithoutOverflow.classList.add("dummy-non-overflow");
       elementWithoutOverflow.innerText = this.description;
@@ -96,11 +99,9 @@ span.truncated {
 
   svg {
     transition: 0.4s ease all;
-
-    @include mobile {
-      height: 20px;
-      width: 20px;
-    }
+    height: 22px;
+    width: 22px;
+    fill: var(--text-color);
 
     &.rotate {
       transform: rotateX(180deg);