diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
index 27137b03b08..e1b99897a3f 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
@@ -228,11 +228,7 @@ const onConnectClick = () => {
 							:class="$style['description-cell']"
 							@click="emit('updateDescription', item)"
 						>
-							<N8nText
-								v-if="item.description"
-								:class="$style['description-text']"
-								data-test-id="mcp-workflow-description"
-							>
+							<N8nText v-if="item.description" data-test-id="mcp-workflow-description">
 								{{ item.description }}
 							</N8nText>
 							<span v-else :class="$style['empty-description']">
@@ -302,29 +298,23 @@ const onConnectClick = () => {
 }
 
 .description-cell {
-	// Shrink to the text so the tooltip is anchored near it, not centered on the column
-	display: inline-block;
+	// inline-box shrinks to the text (so the tooltip anchors near it) while still
+	// clamping the description to 3 lines; max-width keeps long text within the column
+	display: -webkit-inline-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	line-clamp: 3;
+	overflow: hidden;
 	max-width: 100%;
 	color: var(--color--text);
 	padding: var(--spacing--2xs) 0;
 	cursor: pointer;
 
-	&:hover span {
+	&:hover {
 		color: var(--color--text--shade-1);
 	}
 }
 
-// Line clamping only works on inline content, so it has to live on the
-// text element itself rather than on a wrapper with non-inline children
-.description-text {
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 3;
-	line-clamp: 3;
-	overflow: hidden;
-	word-break: break-word;
-}
-
 .empty-description {
 	display: flex;
 	align-items: center;