Fix AppNavigationItems HTML structure (#2011)

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

2 files changed, 57 insertions, 52 deletions

diff --git a/src/components/AppNavigation/ListItemCalendar.vue b/src/components/AppNavigation/ListItemCalendar.vue
index 7c30d782..c50d0bc3 100644
--- a/src/components/AppNavigation/ListItemCalendar.vue
+++ b/src/components/AppNavigation/ListItemCalendar.vue
@@ -107,32 +107,33 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			</ActionButton>
 		</template>
 
-		<ShareCalendar v-if="shareOpen && !calendar.readOnly && !deleteTimeout" :calendar="calendar" />
-
-		<div v-if="!deleteTimeout" :class="{error: nameError}" class="app-navigation-entry-edit">
-			<form>
-				<input v-model="newCalendarName"
-					v-tooltip="{
-						content: tooltipMessage,
-						show: showTooltip('list_' + calendar.id),
-						trigger: 'manual'
-					}"
-					class="edit"
-					type="text"
-					@keyup="checkName($event, calendar, save)">
-				<input :title="t('tasks', 'Cancel')"
-					type="cancel"
-					value=""
-					class="action icon-close"
-					@click="resetView">
-				<input :title="t('tasks', 'Save')"
-					type="button"
-					value=""
-					class="action icon-checkmark"
-					@click="save(calendar)">
-			</form>
-			<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
-		</div>
+		<li>
+			<ShareCalendar v-if="shareOpen && !calendar.readOnly && !deleteTimeout" :calendar="calendar" />
+			<div v-if="!deleteTimeout" :class="{error: nameError}" class="app-navigation-entry-edit">
+				<form>
+					<input v-model="newCalendarName"
+						v-tooltip="{
+							content: tooltipMessage,
+							show: showTooltip('list_' + calendar.id),
+							trigger: 'manual'
+						}"
+						class="edit"
+						type="text"
+						@keyup="checkName($event, calendar, save)">
+					<input :title="t('tasks', 'Cancel')"
+						type="cancel"
+						value=""
+						class="action icon-close"
+						@click="resetView">
+					<input :title="t('tasks', 'Save')"
+						type="button"
+						value=""
+						class="action icon-checkmark"
+						@click="save(calendar)">
+				</form>
+				<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
+			</div>
+		</li>
 	</AppNavigationItem>
 </template>
 
@@ -562,6 +563,7 @@ $color-error: #e9322d;
 
 		.app-navigation-entry-edit {
 			display: inline-block;
+			width: 100%;
 		}
 	}
 
diff --git a/src/views/AppNavigation.vue b/src/views/AppNavigation.vue
index a046bb7f..0488e08d 100644
--- a/src/views/AppNavigation.vue
+++ b/src/views/AppNavigation.vue
@@ -64,32 +64,34 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<template #icon>
 					<Plus :size="20" />
 				</template>
-				<div :class="{error: nameError}" class="app-navigation-entry-edit">
-					<form>
-						<input id="newListInput"
-							v-model="newCalendarName"
-							v-tooltip="{
-								content: tooltipMessage,
-								show: showTooltip('list_'),
-								trigger: 'manual'
-							}"
-							:placeholder="t('tasks', 'New List')"
-							class="edit"
-							type="text"
-							@keyup="checkName($event, null, create)">
-						<input :title="t('tasks', 'Cancel')"
-							type="cancel"
-							value=""
-							class="action icon-close"
-							@click="cancelCreate">
-						<input :title="t('tasks', 'Save')"
-							type="button"
-							value=""
-							class="action icon-checkmark"
-							@click="create($event)">
-					</form>
-					<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
-				</div>
+				<li>
+					<div :class="{error: nameError}" class="app-navigation-entry-edit">
+						<form>
+							<input id="newListInput"
+								v-model="newCalendarName"
+								v-tooltip="{
+									content: tooltipMessage,
+									show: showTooltip('list_'),
+									trigger: 'manual'
+								}"
+								:placeholder="t('tasks', 'New List')"
+								class="edit"
+								type="text"
+								@keyup="checkName($event, null, create)">
+							<input :title="t('tasks', 'Cancel')"
+								type="cancel"
+								value=""
+								class="action icon-close"
+								@click="cancelCreate">
+							<input :title="t('tasks', 'Save')"
+								type="button"
+								value=""
+								class="action icon-checkmark"
+								@click="create($event)">
+						</form>
+						<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
+					</div>
+				</li>
 			</AppNavigationItem>
 			<Trashbin v-if="hasTrashBin" />
 		</template>
@@ -465,6 +467,7 @@ $color-error: #e9322d;
 
 		.app-navigation-entry-edit {
 			display: inline-block;
+			width: 100%;
 		}
 	}