From 9f72abcbdc156f8163beb558fe6efeb6c9627942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 3 Feb 2025 10:23:35 +0100
Subject: [PATCH] pkp/pkp-lib#10769 Improve table layout

---
 src/components/Modal/SideModalLayoutMenu2Columns.vue          | 2 +-
 src/components/Table/Table.vue                                | 2 +-
 src/pages/dashboard/DashboardPage.vue                         | 4 ++++
 .../components/DashboardTable/CellReviewAssignmentActions.vue | 2 +-
 .../DashboardTable/CellReviewAssignmentActivity.vue           | 2 +-
 .../components/DashboardTable/CellReviewAssignmentId.vue      | 2 +-
 .../components/DashboardTable/CellReviewAssignmentTitle.vue   | 2 +-
 .../components/DashboardTable/CellSubmissionActions.vue       | 2 +-
 .../CellSubmissionActivity/CellSubmissionActivity.vue         | 2 +-
 .../components/DashboardTable/CellSubmissionDays.vue          | 2 +-
 .../dashboard/components/DashboardTable/CellSubmissionId.vue  | 2 +-
 .../components/DashboardTable/CellSubmissionStage.vue         | 2 +-
 .../components/DashboardTable/CellSubmissionTitle.vue         | 2 +-
 13 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Modal/SideModalLayoutMenu2Columns.vue b/src/components/Modal/SideModalLayoutMenu2Columns.vue
index c7dd15ba9..6339620be 100644
--- a/src/components/Modal/SideModalLayoutMenu2Columns.vue
+++ b/src/components/Modal/SideModalLayoutMenu2Columns.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="p-4">
+	<div class="min-w-max p-4">
 		<div class="flex w-full bg-secondary">
 			<div class="flex flex-col border-t border-light">
 				<slot name="menu"></slot>
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 81d220769..bff58b9e1 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="overflow-x-auto">
+	<div class="">
 		<div
 			v-if="slots.label || slots.description || slots['top-controls']"
 			class="flex justify-between border-x border-t border-light bg-secondary p-4"
diff --git a/src/pages/dashboard/DashboardPage.vue b/src/pages/dashboard/DashboardPage.vue
index 16e531244..0a0d25648 100644
--- a/src/pages/dashboard/DashboardPage.vue
+++ b/src/pages/dashboard/DashboardPage.vue
@@ -115,6 +115,10 @@ const store = useDashboardPageStore(props);
 </script>
 
 <style>
+.pkp_page_dashboard {
+	@apply min-w-max;
+}
+
 .pkp_page_dashboard .app__main {
 	@apply bg-secondary p-0;
 }
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue
index 71d96cb96..d27963153 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>
+	<TableCell fit-content>
 		<PkpButton
 			class="-ms-3"
 			:aria-describedby="'submission-title-' + item.id"
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue
index ed93a4fa8..35d3c0cac 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>
+	<TableCell class="min-w-[17rem]">
 		<div class="flex flex-col justify-center gap-y-2">
 			<component
 				:is="Components[config.component] || config.component"
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue
index 108347e22..990bb2eac 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>{{ item.submissionId }}</TableCell>
+	<TableCell fit-content>{{ item.submissionId }}</TableCell>
 </template>
 
 <script setup>
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue
index e4dd064fd..b06278d4f 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue
@@ -1,7 +1,7 @@
 <template>
 	<TableCell
 		:id="'submission-title-' + item.id"
-		class="max-w-[25em] truncate"
+		full-width-truncated
 		:is-row-header="true"
 	>
 		<span class="text-lg-semibold" v-html="title"></span>
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue
index 8c20cdfa7..30dfaa16f 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>
+	<TableCell fit-content>
 		<PkpButton
 			class="-ms-3"
 			:aria-describedby="'submission-title-' + item.id"
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue
index 8b72a3aae..4c5baf410 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>
+	<TableCell class="min-w-[17rem]">
 		<div class="flex flex-col justify-center gap-y-2">
 			<component
 				:is="Components[config.component] || config.component"
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue
index 236092aed..3576726b3 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>{{ days }}</TableCell>
+	<TableCell fit-content>{{ days }}</TableCell>
 </template>
 <script setup>
 import {computed} from 'vue';
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue
index 310cbb9de..a2414a9e5 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>{{ item.id }}</TableCell>
+	<TableCell fit-content>{{ item.id }}</TableCell>
 </template>
 
 <script setup>
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue
index 3356d18dd..65fe9b578 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>
+	<TableCell fit-content>
 		<span class="text-base-normal">
 			<StageBubble :extended-stage="extendedStage">
 				{{ stageLabel }}
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue
index e865e7244..84fc96e13 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue
@@ -1,7 +1,7 @@
 <template>
 	<TableCell
 		:id="'submission-title-' + item.id"
-		class="max-w-[25em] truncate"
+		full-width-truncated
 		:is-row-header="true"
 	>
 		<span class="text-base-bold">