From f482f064a0ccc9fd4f51957944330f989f52ecf6 Mon Sep 17 00:00:00 2001 From: Tadeu Tupinamba Date: Mon, 2 Mar 2026 19:46:54 -0300 Subject: [PATCH] fix(comments): improve multiline comment input styling Replace pill shape (border-radius: 9999px) with rounded rect (12px) on comment and reply input wrappers. Add max-height with overflow scroll so long replies stay contained instead of stretching the card. --- .../src/components/CommentsLayer/CommentDialog.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue index e282b98b57..fa912cabe6 100644 --- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue +++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue @@ -864,10 +864,12 @@ watch(editingCommentId, (commentId) => { /* ── New comment input ── */ .new-comment-input-wrapper { border: 1.5px solid var(--sd-border-default, #dbdbdb); - border-radius: 9999px; + border-radius: 12px; padding: 8.5px 10.5px; background: var(--sd-surface-card, #ffffff); margin-top: 4px; + max-height: 150px; + overflow-y: auto; } .new-comment-input-wrapper :deep(.comment-entry) { border-radius: 0; @@ -909,9 +911,11 @@ watch(editingCommentId, (commentId) => { } .reply-input-wrapper { border: 1.5px solid var(--sd-border-default, #dbdbdb); - border-radius: 9999px; + border-radius: 12px; padding: 8.5px 10.5px; background: var(--sd-surface-card, #ffffff); + max-height: 150px; + overflow-y: auto; } .reply-input-wrapper :deep(.comment-entry) { border-radius: 0;