As can be seen from in scripture-editors codesandbox the <h2 class="CommentPlugin_CommentsPanel_Heading">Comments</h2> overflows the comment container.
In Platform.Bible this causes a "right hand" overflow, that produces a vertical scroll bar:
Which can also be seen in the codesandbox:
It is fixed by removing width: 100% from .CommentPlugin_CommentsPanel_Heading
[x] issue 2: header text is clipped
See pictures below.
.CommentPlugin_CommentsPanel_Heading should get
text-overflow: ellipsis; /* clip the header text */
padding: 16px /* have symetric padding in a 2^n grid value */
/* remove height: 34px; */
/* you may or may not want to add line-height: 16px, as the font itself seems to create some additional whitespace */
Now also remove the top: 45px from .CommentPlugin_CommentsPanel_List
Before:
After:
[x] issue 3: placeholder text "No Comments" is not visible
position: absolute should be removed from .CommentPlugin_CommentsPanel_Heading
with position: absolute
when removing position: absolute
Removing it seems not to have a negative impact on the comment list
I identified 3 issues with the comment sidebar:
As can be seen from in scripture-editors codesandbox the
<h2 class="CommentPlugin_CommentsPanel_Heading">Comments</h2>overflows the comment container.In Platform.Bible this causes a "right hand" overflow, that produces a vertical scroll bar:
Which can also be seen in the codesandbox:
It is fixed by removing
width: 100%from.CommentPlugin_CommentsPanel_HeadingSee pictures below.
.CommentPlugin_CommentsPanel_Headingshould getNow also remove the
top: 45pxfrom.CommentPlugin_CommentsPanel_ListBefore:
After:
position: absoluteshould be removed from.CommentPlugin_CommentsPanel_Headingwith
position: absolutewhen removing
position: absoluteRemoving it seems not to have a negative impact on the comment list