diff --git a/client/src/components/QuoteCard.vue b/client/src/components/QuoteCard.vue
index 16d71d7..f631bb2 100644
--- a/client/src/components/QuoteCard.vue
+++ b/client/src/components/QuoteCard.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="quote-card__container" :class="{ 'quote-card__container__editable': editable }">
+  <div :class="['quote-card__container', { 'quote-card__container__editable': editable }]">
     <div v-if="editable" class="quote-card__action-buttons">
       <QuoteCardActionButton @click="editQuote" icon="edit" />
       <QuoteCardActionButton @click="deleteQuote" icon="trash" />
     </div>
-    <div :id="quoteElId" class="quote__quote" :contenteditable="isEditMode">
-      {{ quote.quote }}
+    <div class="quote-card__text-container">
+      <div :id="quoteElId" class="quote-card__quote" :contenteditable="isEditMode">
+        {{ quote.quote }}
+      </div>
     </div>
   </div>
 </template>
@@ -45,8 +47,6 @@ const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
 .quote-card {
   &__container {
     position: relative;
-    display: flex;
-    align-items: center;
     width: 300px;
     height: 150px;
     margin: 32px;
@@ -55,16 +55,24 @@ const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
     border: $quote-border;
     border-radius: 0 16px 0 0;
     color: $quote-text-color;
+  }
 
-    &__editable {
+  &__editable {
+    cursor: text;
+
+    & .quote-card__quote {
       cursor: text;
-
-      & .quote__quote {
-        cursor: text;
-      }
     }
   }
 
+  &__text-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
   &__quote {
     font-family: $font-secondary;
     font-weight: bold;