From 6f93b1a2c4769f7ad1ebdcc0add08998a61213da Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Fri, 8 Dec 2023 14:05:34 +0000 Subject: [PATCH] Fix long comment UI issues (scroll shaking & comment overflow) - Includes PR #11322 - Fixes #10984 (scrolling issues with long initial comments) - Fixes #11324 (overflow of comment reply with long words) --- CHANGELOG.txt | 1 + .../components/CommentApp/components/CommentReply/style.scss | 1 + client/src/components/CommentApp/main.scss | 2 +- docs/releases/6.0.md | 1 + 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 2dc122da0f..d51950737f 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -63,6 +63,7 @@ Changelog * Fix: Prevent TitleFieldPanel from raising an error when the slug field is missing or read-only (Rohit Sharma) * Fix: Ensure that the close button on the new dialog designs is visible in the non-message variant (Nandini Arora) * Fix: Ensure the sidebar account toggle has no duplicate accessible labels (Nandini Arora) + * Fix: Avoid text overflow issues in comment replies and scroll position issues for long comments (Rohit Sharma) * Docs: Document, for contributors, the use of translate string literals passed as arguments to tags and filters using `_()` within templates (Chiemezuo Akujobi) * Docs: Document all features for the Documents app in one location (Neeraj Yetheendran) * Docs: Add section to testing docs about creating pages and working with page content (Mariana Bedran Lesche) diff --git a/client/src/components/CommentApp/components/CommentReply/style.scss b/client/src/components/CommentApp/components/CommentReply/style.scss index 31e3e3bca2..765c5b6a02 100644 --- a/client/src/components/CommentApp/components/CommentReply/style.scss +++ b/client/src/components/CommentApp/components/CommentReply/style.scss @@ -12,6 +12,7 @@ margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; + word-break: break-all; &--mode-deleting { color: theme('colors.text-context'); diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss index d8dfa79f32..5ea8474888 100644 --- a/client/src/components/CommentApp/main.scss +++ b/client/src/components/CommentApp/main.scss @@ -110,7 +110,7 @@ $box-padding: 20px; } .comments-list { - position: absolute; + position: relative; top: 20px; inset-inline-end: 20px; z-index: calc(theme('zIndex.header') + 5); diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md index 905aa4f44d..70056cf2ca 100644 --- a/docs/releases/6.0.md +++ b/docs/releases/6.0.md @@ -91,6 +91,7 @@ Thank you to Thibaud Colas and Badr Fourane for their work on this feature. * Prevent TitleFieldPanel from raising an error when the slug field is missing or read-only (Rohit Sharma) * Ensure that the close button on the new dialog designs is visible in the non-message variant (Nandini Arora) * Ensure the sidebar account toggle has no duplicate accessible labels (Nandini Arora) + * Avoid text overflow issues in comment replies and scroll position issues for long comments (Rohit Sharma) ### Documentation