From 5d73f7b83cd9d6decfa1e27aea07522647f790ba Mon Sep 17 00:00:00 2001
From: JJ-8 <2482444-JJ-8@users.noreply.gitlab.com>
Date: Sat, 4 Dec 2021 12:54:37 +0100
Subject: [PATCH 1/2] Add word wrapping to table layout

This prevents lots of vertical scrolling when there is a long description.
Related to https://github.com/TFNS/CTFNote/issues/111
---
 front/src/components/Task/TaskTable.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/front/src/components/Task/TaskTable.vue b/front/src/components/Task/TaskTable.vue
index a99e1ef31..620ed70a1 100644
--- a/front/src/components/Task/TaskTable.vue
+++ b/front/src/components/Task/TaskTable.vue
@@ -9,7 +9,7 @@
     <template #body="props">
       <q-tr v-show="isTaskVisible(props.row)" :props="props">
         <task-menu :task="props.row" />
-        <q-td key="category" :props="props" auto-width class="no-click">
+        <q-td key="category" :props="props" class="no-click" auto-width>
           <task-category-chip :name="props.row.category" />
         </q-td>
 
@@ -19,17 +19,17 @@
           </q-badge>
         </q-td>
 
-        <q-td key="title" :props="props" auto-width align="left">
+        <q-td key="title" :props="props" align="left">
           <ctf-note-link name="task" :ctf="ctf" :task="props.row">
             {{ props.row.title }}
           </ctf-note-link>
         </q-td>
 
         <q-td key="description" :props="props">
-          <pre v-if="props.row.solved" class="blur">{{ props.row.flag }}</pre>
-          <pre v-else>{{ props.row.description || '…' }}</pre>
+          <div v-if="props.row.solved" class="blur">{{ props.row.flag }}</div>
+          <div v-else>{{ props.row.description || '…' }}</div>
         </q-td>
-        <q-td key="players" :props="props" auto-width>
+        <q-td key="players" :props="props">
           <task-player-list :task="props.row" />
         </q-td>
         <q-td key="open" :props="props" auto-width>
@@ -39,7 +39,7 @@
             </q-btn>
           </ctf-note-link>
         </q-td>
-        <q-td key="actions" :props="props" auto-width class="no-click">
+        <q-td key="actions" :props="props" class="no-click" auto-width>
           <task-btn-group :task="props.row" />
         </q-td>
       </q-tr>
@@ -89,8 +89,8 @@ export default defineComponent({
       col('title', { sortable: true }),
       col('description', { label: 'description / flag' }),
       col('players', { align: 'center' }),
-      col('open', { label: '' }),
-      col('actions', { label: '' }),
+      col('open', { label: '', align: 'right', style: 'width:120px;max-width:120px;'}),
+      col('actions', { label: '', align: 'right', style: 'width:120px;max-width:120px;' }),
     ];
     const pagination = {
       rowsPerPage: 0,
@@ -108,4 +108,8 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.q-table td, .q-table th {
+      white-space: normal !important;
+}
+</style>

From 5a21615f108e4e1a798da4d02244e8f84ce9e79b Mon Sep 17 00:00:00 2001
From: JJ-8 <34778827+JJ-8@users.noreply.github.com>
Date: Tue, 5 Apr 2022 12:24:04 +0200
Subject: [PATCH 2/2] Remove `!important`

Also do some automatic formatting
---
 front/src/components/Task/TaskTable.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/front/src/components/Task/TaskTable.vue b/front/src/components/Task/TaskTable.vue
index 620ed70a1..0cef30557 100644
--- a/front/src/components/Task/TaskTable.vue
+++ b/front/src/components/Task/TaskTable.vue
@@ -89,8 +89,16 @@ export default defineComponent({
       col('title', { sortable: true }),
       col('description', { label: 'description / flag' }),
       col('players', { align: 'center' }),
-      col('open', { label: '', align: 'right', style: 'width:120px;max-width:120px;'}),
-      col('actions', { label: '', align: 'right', style: 'width:120px;max-width:120px;' }),
+      col('open', {
+        label: '',
+        align: 'right',
+        style: 'width:120px;max-width:120px;',
+      }),
+      col('actions', {
+        label: '',
+        align: 'right',
+        style: 'width:120px;max-width:120px;',
+      }),
     ];
     const pagination = {
       rowsPerPage: 0,
@@ -109,7 +117,8 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.q-table td, .q-table th {
-      white-space: normal !important;
+.q-table td,
+.q-table th {
+  white-space: normal;
 }
 </style>