pkp/pkp-lib#10769 Improve table layout

Author: jardakotesovec

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>

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"

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;
 }

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"

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"

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>

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>

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"

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"

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';

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>

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 }}

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">