From 5fd7e3f7086c5f4910b5c82ba384aebc44a014c9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 22 Jul 2021 21:48:05 +0200
Subject: [PATCH] Fix table view scrolling on mobile

---
 src/styles/theme/theme.scss    |   5 +
 src/views/list/views/Table.vue | 258 ++++++++++++++++++---------------
 2 files changed, 147 insertions(+), 116 deletions(-)

diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index f29ff64e..a9f587f9 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -64,6 +64,11 @@ h6 {
   overflow: visible;
 }
 
+.has-horizontal-overflow {
+	overflow-y: hidden;
+	overflow-x: auto;
+}
+
 .image.is-avatar {
   border-radius: 100%;
 }
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 1d3c4c18..338d6a51 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -20,18 +20,42 @@
 			<transition name="fade">
 				<card v-if="showActiveColumnsFilter">
 					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">{{ $t('task.attributes.done') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">{{ $t('task.attributes.title') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">{{ $t('task.attributes.priority') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">{{ $t('task.attributes.labels') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">{{ $t('task.attributes.assignees') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">{{ $t('task.attributes.dueDate') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">{{ $t('task.attributes.startDate') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">{{ $t('task.attributes.endDate') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">{{ $t('task.attributes.percentDone') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">{{ $t('task.attributes.created') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">{{ $t('task.attributes.updated') }}</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">{{ $t('task.attributes.createdBy') }}</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
+						{{ $t('task.attributes.done') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
+						{{ $t('task.attributes.title') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
+						{{ $t('task.attributes.priority') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
+						{{ $t('task.attributes.labels') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
+						{{ $t('task.attributes.assignees') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
+						{{ $t('task.attributes.dueDate') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
+						{{ $t('task.attributes.startDate') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
+						{{ $t('task.attributes.endDate') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
+						{{ $t('task.attributes.percentDone') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
+						{{ $t('task.attributes.created') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
+						{{ $t('task.attributes.updated') }}
+					</fancycheckbox>
+					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
+						{{ $t('task.attributes.createdBy') }}
+					</fancycheckbox>
 				</card>
 			</transition>
 			<filter-popup
@@ -42,109 +66,111 @@
 		</div>
 
 		<card :padding="false" :has-content="false">
-			<table class="table has-actions is-hoverable is-fullwidth mb-0">
-				<thead>
-				<tr>
-					<th v-if="activeColumns.id">
-						#
-						<sort :order="sortBy.id" @click="sort('id')"/>
-					</th>
-					<th v-if="activeColumns.done">
-						{{ $t('task.attributes.done') }}
-						<sort :order="sortBy.done" @click="sort('done')"/>
-					</th>
-					<th v-if="activeColumns.title">
-						{{ $t('task.attributes.title') }}
-						<sort :order="sortBy.title" @click="sort('title')"/>
-					</th>
-					<th v-if="activeColumns.priority">
-						{{ $t('task.attributes.priority') }}
-						<sort :order="sortBy.priority" @click="sort('priority')"/>
-					</th>
-					<th v-if="activeColumns.labels">
-						{{ $t('task.attributes.labels') }}
-					</th>
-					<th v-if="activeColumns.assignees">
-						{{ $t('task.attributes.assignees') }}
-					</th>
-					<th v-if="activeColumns.dueDate">
-						{{ $t('task.attributes.dueDate') }}
-						<sort :order="sortBy.due_date" @click="sort('due_date')"/>
-					</th>
-					<th v-if="activeColumns.startDate">
-						{{ $t('task.attributes.startDate') }}
-						<sort :order="sortBy.start_date" @click="sort('start_date')"/>
-					</th>
-					<th v-if="activeColumns.endDate">
-						{{ $t('task.attributes.endDate') }}
-						<sort :order="sortBy.end_date" @click="sort('end_date')"/>
-					</th>
-					<th v-if="activeColumns.percentDone">
-						{{ $t('task.attributes.percentDone') }}
-						<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
-					</th>
-					<th v-if="activeColumns.created">
-						{{ $t('task.attributes.created') }}
-						<sort :order="sortBy.created" @click="sort('created')"/>
-					</th>
-					<th v-if="activeColumns.updated">
-						{{ $t('task.attributes.updated') }}
-						<sort :order="sortBy.updated" @click="sort('updated')"/>
-					</th>
-					<th v-if="activeColumns.createdBy">
-						{{ $t('task.attributes.createdBy') }}
-					</th>
-				</tr>
-				</thead>
-				<tbody>
-				<tr :key="t.id" v-for="t in tasks">
-					<td v-if="activeColumns.id">
-						<router-link :to="{name: 'task.detail', params: { id: t.id }}">
-							<template v-if="t.identifier === ''">
-								#{{ t.index }}
-							</template>
-							<template v-else>
-								{{ t.identifier }}
-							</template>
-						</router-link>
-					</td>
-					<td v-if="activeColumns.done">
-						<div class="is-done" v-if="t.done">Done</div>
-					</td>
-					<td v-if="activeColumns.title">
-						<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
-					</td>
-					<td v-if="activeColumns.priority">
-						<priority-label :priority="t.priority" :show-all="true"/>
-					</td>
-					<td v-if="activeColumns.labels">
-						<labels :labels="t.labels"/>
-					</td>
-					<td v-if="activeColumns.assignees">
-						<user
-							:avatar-size="27"
-							:is-inline="true"
-							:key="t.id + 'assignee' + a.id + i"
-							:show-username="false"
-							:user="a"
-							v-for="(a, i) in t.assignees"
-						/>
-					</td>
-					<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
-					<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
-					<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
-					<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
-					<date-table-cell :date="t.created" v-if="activeColumns.created"/>
-					<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
-					<td v-if="activeColumns.createdBy">
-						<user
-							:avatar-size="27"
-							:show-username="false"
-							:user="t.createdBy"/>
-					</td>
-				</tr>
-				</tbody>
-			</table>
+			<div class="has-horizontal-overflow">
+				<table class="table has-actions is-hoverable is-fullwidth mb-0">
+					<thead>
+					<tr>
+						<th v-if="activeColumns.id">
+							#
+							<sort :order="sortBy.id" @click="sort('id')"/>
+						</th>
+						<th v-if="activeColumns.done">
+							{{ $t('task.attributes.done') }}
+							<sort :order="sortBy.done" @click="sort('done')"/>
+						</th>
+						<th v-if="activeColumns.title">
+							{{ $t('task.attributes.title') }}
+							<sort :order="sortBy.title" @click="sort('title')"/>
+						</th>
+						<th v-if="activeColumns.priority">
+							{{ $t('task.attributes.priority') }}
+							<sort :order="sortBy.priority" @click="sort('priority')"/>
+						</th>
+						<th v-if="activeColumns.labels">
+							{{ $t('task.attributes.labels') }}
+						</th>
+						<th v-if="activeColumns.assignees">
+							{{ $t('task.attributes.assignees') }}
+						</th>
+						<th v-if="activeColumns.dueDate">
+							{{ $t('task.attributes.dueDate') }}
+							<sort :order="sortBy.due_date" @click="sort('due_date')"/>
+						</th>
+						<th v-if="activeColumns.startDate">
+							{{ $t('task.attributes.startDate') }}
+							<sort :order="sortBy.start_date" @click="sort('start_date')"/>
+						</th>
+						<th v-if="activeColumns.endDate">
+							{{ $t('task.attributes.endDate') }}
+							<sort :order="sortBy.end_date" @click="sort('end_date')"/>
+						</th>
+						<th v-if="activeColumns.percentDone">
+							{{ $t('task.attributes.percentDone') }}
+							<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
+						</th>
+						<th v-if="activeColumns.created">
+							{{ $t('task.attributes.created') }}
+							<sort :order="sortBy.created" @click="sort('created')"/>
+						</th>
+						<th v-if="activeColumns.updated">
+							{{ $t('task.attributes.updated') }}
+							<sort :order="sortBy.updated" @click="sort('updated')"/>
+						</th>
+						<th v-if="activeColumns.createdBy">
+							{{ $t('task.attributes.createdBy') }}
+						</th>
+					</tr>
+					</thead>
+					<tbody>
+					<tr :key="t.id" v-for="t in tasks">
+						<td v-if="activeColumns.id">
+							<router-link :to="{name: 'task.detail', params: { id: t.id }}">
+								<template v-if="t.identifier === ''">
+									#{{ t.index }}
+								</template>
+								<template v-else>
+									{{ t.identifier }}
+								</template>
+							</router-link>
+						</td>
+						<td v-if="activeColumns.done">
+							<div class="is-done" v-if="t.done">Done</div>
+						</td>
+						<td v-if="activeColumns.title">
+							<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
+						</td>
+						<td v-if="activeColumns.priority">
+							<priority-label :priority="t.priority" :show-all="true"/>
+						</td>
+						<td v-if="activeColumns.labels">
+							<labels :labels="t.labels"/>
+						</td>
+						<td v-if="activeColumns.assignees">
+							<user
+								:avatar-size="27"
+								:is-inline="true"
+								:key="t.id + 'assignee' + a.id + i"
+								:show-username="false"
+								:user="a"
+								v-for="(a, i) in t.assignees"
+							/>
+						</td>
+						<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
+						<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
+						<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
+						<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
+						<date-table-cell :date="t.created" v-if="activeColumns.created"/>
+						<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
+						<td v-if="activeColumns.createdBy">
+							<user
+								:avatar-size="27"
+								:show-username="false"
+								:user="t.createdBy"/>
+						</td>
+					</tr>
+					</tbody>
+				</table>
+			</div>
 
 			<nav
 				aria-label="pagination"
@@ -163,7 +189,7 @@
 					:to="getRouteForPagination(currentPage + 1, 'table')"
 					class="pagination-next"
 					tag="button">
-					{{ $t('mist.next') }}
+					{{ $t('misc.next') }}
 				</router-link>
 				<ul class="pagination-list">
 					<template v-for="(p, i) in pages">