pkp/pkp-lib#10769 Improve table layout

pkp · Feb 3, 2025 · 9f72abc · 9f72abc
1 parent bae8ad5
commit 9f72abc
Show file tree

Hide file tree

Showing 13 changed files with 16 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,5 @@
 <template>
-	<TableCell>
+	<TableCell fit-content>
 		<PkpButton
 			class="-ms-3"
 			:aria-describedby="'submission-title-' + item.id"

diff --git a/...ges/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue b/...ges/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
@@ -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
@@ -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
@@ -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
@@ -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">