Medium-layout: more "comment section collapse" fixes

- When collapsing, scroll back to the first comment instead of hanging in the Recommended section.

- Enhancement for 5380bc04: don't show "Collapse/Expanse" if there's only 1 comment. The comment itself is already collapsed to 3 lines, so it won't take up too much height.

- Fix css: recalling what Dan mentioned: if following BEM right (modifiers shouldn't be used standalone), we wouldn't incorrectly use `@extend` in this case and confuse the reader.

- Enlarged the empty spacing to make it symmetrical with the Recommended section below it.

ui/component/commentsList/view.jsx

@@ -87,6 +87,7 @@ export default function CommentList(props: Props) {
   const isMediumScreen = useIsMediumScreen();
 
   const spinnerRef = React.useRef();
+  const commentListRef = React.useRef();
   const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
   const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
   const [page, setPage] = React.useState(1);
@@ -286,23 +287,22 @@ export default function CommentList(props: Props) {
           )}
 
           <ul
-            className={classnames({
+            ref={commentListRef}
-              comments: !isMediumScreen || expandedComments,
+            className={classnames('comments', {
-              'comments--contracted': isMediumScreen && !expandedComments,
+              'comments--contracted': isMediumScreen && !expandedComments && totalComments > 1,
             })}
           >
             {readyToDisplayComments && (
               <>
                 {pinnedComments && <CommentElements comments={pinnedComments} {...commentProps} />}
-
                 <CommentElements comments={topLevelComments} {...commentProps} />
               </>
             )}
           </ul>
 
           {!hasDefaultExpansion && (
-            <div className="card__bottom-actions--comments">
+            <div className="card__bottom-actions card__bottom-actions--comments">
-              {(!expandedComments || moreBelow) && totalComments > 0 && (
+              {(!expandedComments || moreBelow) && totalComments > 1 && (
                 <Button
                   button="link"
                   title={!expandedComments ? __('Expand') : __('More')}
@@ -310,12 +310,22 @@ export default function CommentList(props: Props) {
                   onClick={() => (!expandedComments ? setExpandedComments(true) : setPage(page + 1))}
                 />
               )}
-              {expandedComments && totalComments > 0 && (
+              {expandedComments && totalComments > 1 && (
                 <Button
                   button="link"
                   title={__('Collapse')}
                   label={__('Collapse')}
-                  onClick={() => setExpandedComments(false)}
+                  onClick={() => {
+                    setExpandedComments(false);
+                    if (commentListRef.current) {
+                      const ADDITIONAL_OFFSET = 200;
+                      const refTop = commentListRef.current.getBoundingClientRect().top;
+                      window.scrollTo({
+                        top: refTop + window.pageYOffset - ADDITIONAL_OFFSET,
+                        behavior: 'smooth',
+                      });
+                    }
+                  }}
                 />
               )}
             </div>

ui/scss/component/_card.scss

@@ -627,8 +627,7 @@
 }
 
 .card__bottom-actions--comments {
-  @extend .card__bottom-actions;
+  margin-top: var(--spacing-xl);
-  margin-top: var(--spacing-s);
 }
 
 .card__multi-pane {

ui/scss/component/_comments.scss

@@ -28,7 +28,6 @@ $thumbnailWidthSmall: 2rem;
 }
 
 .comments--contracted {
-  @extend .comments;
   max-height: 5rem;
   overflow: hidden;
   -webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));