From 067ec5e057737b47d81191196672b4884e92a24a Mon Sep 17 00:00:00 2001
From: Gary Kim <gary@garykim.dev>
Date: Wed, 18 Sep 2019 00:02:24 +0800
Subject: [PATCH] Fix overflowing card heading

If the heading of a card is too long,
it will push interface elements off the
card.

This change will ensure that text that
does not have spaces and thus cannot be
wrapped will simply be cut off with an
ellipsis instead.

Signed-off-by: Gary Kim <gary@garykim.dev>
---
 src/components/cards/CardItem.vue | 33 +++++++++++++++----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 70a85a0ce..56d7613e3 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -30,23 +30,21 @@
 		<div class="card-upper">
 			<h3 v-if="showArchived">{{ card.title }}</h3>
 			<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
-			<h3 v-else>editing</h3>
-			<transition name="fade" mode="out-in">
-				<form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit"
-					@submit.prevent="finishedEdit(card)">
-					<input v-model="copiedCard.title" type="text" autofocus>
-					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
-				</form>
+			<h3 v-else>&nbsp;</h3>
+			<form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit"
+				@submit.prevent="finishedEdit(card)">
+				<input v-model="copiedCard.title" type="text" autofocus>
+				<input type="button" class="icon-confirm" @click="finishedEdit(card)">
+			</form>
 
-				<Actions @click.stop.prevent>
-					<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
-					<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
-					<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
-					<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
-					<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
-				</Actions>
+			<Actions v-if="!editing" @click.stop.prevent>
+				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
+				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
+				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
+				<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
+				<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
+			</Actions>
 
-			</transition>
 			<modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
 				<div class="modal__content">
 					<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
@@ -60,7 +58,6 @@
 
 				</div>
 			</modal>
-
 		</div>
 		<ul class="labels" @click="openCard">
 			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
@@ -225,7 +222,7 @@ export default {
 				display: flex;
 				padding: 5px 7px;
 				position: absolute;
-				width: calc(100% - 14px);
+				width: 100%;
 				input[type=text] {
 					flex-grow: 1;
 				}
@@ -236,6 +233,8 @@ export default {
 				flex-grow: 1;
 				font-size: 100%;
 				cursor: text;
+				overflow-x: hidden;
+				word-wrap: break-word;
 			}
 		}