feat: Editor bar visibility (quince.master) (#583)

* feat: fixed editor bar visibility

* feat: fixed z index

src/discussions/common/AuthorLabel.jsx

@@ -51,7 +51,7 @@ const AuthorLabel = ({
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}

src/discussions/post-comments/comments/CommentsView.jsx

@@ -36,7 +36,7 @@ const CommentsView = ({ endorsed }) => {
 
   const handleDefinition = useCallback((message, commentsLength) => (
     <div
-      className="mx-4 my-14px text-gray-700 font-style"
+      className="comment-line mx-4 my-14px text-gray-700 font-style"
       role="heading"
       aria-level="2"
     >

src/index.scss

@@ -331,7 +331,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 3;
+  z-index: 2 !important;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -340,11 +340,19 @@ header {
     .nav-item:not(:last-child){
       .nav-link {
           border-right: 0;
+
+          @media screen and (max-width: 567px) {
+            border-right: solid 1px #e9e6e4;
+          }
       }
     }
   }
 }
 
+.tox-tinymce-aux {
+  z-index: 1 !important;
+}
+
 .breadcrumb-menu {
   z-index: 1;
 }
@@ -488,6 +496,11 @@ header {
   z-index: 1;
 }
 
+.comment-line {
+  width: calc(100% - 180px);
+  line-height: 1;
+}
+
 .post-preview,
 .discussion-comments {
   blockquote {
@@ -529,3 +542,9 @@ header {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.author-name {
+  line-height: 1;
+  word-break: break-all;
+}
+