Tried simplifying and spliting some of Movie component.

Simplified sidebar element to use props.
Replaced icons with feather icons.

Description gets it's own component & tries it best at figuring out if
description should be truncated or not. Now it adds a element at bottom
of body with the same description and compares the height to default
truncated text. If the dummy element is taller we show the truncate
button.

src/components/ui/MovieDetail.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="movie-detail">
+    <h2 class="title">{{ title }}</h2>
+    <span v-if="detail" class="info">{{ detail }}</span>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    detail: {
+      required: false,
+      default: null
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+
+.movie-detail {
+  margin-bottom: 20px;
+  margin-right: 20px;
+
+  @include tablet-min {
+    margin-bottom: 30px;
+    margin-right: 30px;
+  }
+
+  h2.title {
+    margin: 0;
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    color: var(--color-green);
+  }
+
+  span.info {
+    font-weight: 300;
+    font-size: 1rem;
+    letter-spacing: 0.8px;
+    margin-top: 5px;
+  }
+}
+</style>