From 5984a32992c8a07f18d18f133340199aa436893c Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Wed, 17 Jan 2024 20:51:53 +0100
Subject: [PATCH] Prevent overflow with long collection names on Access Control
 page (#21120)

* Prevent overflow with long collection names on Access Control page

* Add changeset
---
 .changeset/little-poems-cross.md              |  5 ++
 .../components/permissions-overview-row.vue   | 65 +++++++++++--------
 2 files changed, 42 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/little-poems-cross.md

diff --git a/.changeset/little-poems-cross.md b/.changeset/little-poems-cross.md
new file mode 100644
index 0000000000..742f11733c
--- /dev/null
+++ b/.changeset/little-poems-cross.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Ensured long collection names are not overflowing permission table on Access Control page
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
index b16554551d..f4a0a37051 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
@@ -31,15 +31,16 @@ function isLoading(action: string) {
 
 <template>
 	<div class="permissions-overview-row">
-		<span class="name">
-			<span v-tooltip.left="collection.name">{{ collection.collection }}</span>
-			<span class="actions">
-				<span class="all" @click="setFullAccessAll">{{ t('all') }}</span>
-				<span class="divider">/</span>
-				<span class="none" @click="setNoAccessAll">{{ t('none') }}</span>
-			</span>
+		<span v-tooltip.left="collection.name" class="name">{{ collection.collection }}</span>
+
+		<span class="actions">
+			<span class="all" @click="setFullAccessAll">{{ t('all') }}</span>
+			<span class="divider">/</span>
+			<span class="none" @click="setNoAccessAll">{{ t('none') }}</span>
 		</span>
 
+		<span class="spacer" />
+
 		<template v-for="action in editablePermissionActions" :key="action">
 			<permissions-overview-toggle
 				v-if="!disabledActions?.includes(action)"
@@ -63,46 +64,54 @@ function isLoading(action: string) {
 	padding: 0 12px;
 
 	.name {
-		flex-grow: 1;
 		font-family: var(--theme--fonts--monospace--font-family);
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 
-		.actions {
-			margin-left: 8px;
-			color: var(--theme--foreground-subdued);
-			font-size: 12px;
-			opacity: 0;
-			transition: opacity var(--fast) var(--transition);
+	.actions {
+		font-family: var(--theme--fonts--monospace--font-family);
+		margin-left: 8px;
+		color: var(--theme--foreground-subdued);
+		font-size: 12px;
+		opacity: 0;
+		transition: opacity var(--fast) var(--transition);
 
-			span {
-				cursor: pointer;
+		span {
+			cursor: pointer;
 
-				&:hover {
-					&.all {
-						color: var(--theme--success);
-					}
+			&:hover {
+				&.all {
+					color: var(--theme--success);
+				}
 
-					&.none {
-						color: var(--theme--danger);
-					}
+				&.none {
+					color: var(--theme--danger);
 				}
 			}
+		}
 
-			.divider {
-				margin: 0 6px;
-				cursor: default;
-			}
+		.divider {
+			margin: 0 6px;
+			cursor: default;
 		}
 	}
 
-	&:hover .name .actions {
+	&:hover .actions {
 		opacity: 1;
 	}
 
+	.spacer {
+		flex-grow: 1;
+		width: 20px;
+	}
+
 	.null {
 		display: flex;
 		justify-content: center;
 		width: 24px;
 		color: var(--theme--foreground);
+		cursor: not-allowed;
 	}
 
 	:is(.permissions-overview-toggle, .null) + :is(.permissions-overview-toggle, .null) {