Bläddra i källkod

style: adjust comment editor to use flex display for better user focus

Yuki Takei 1 år sedan
förälder
incheckning
283f51d3b5

+ 6 - 0
apps/app/src/client/components/PageComment/CommentEditor.module.scss

@@ -23,6 +23,12 @@
 
 
 // adjust height
 // adjust height
 .comment-editor-styles :global {
 .comment-editor-styles :global {
+  // Set `display: flex` instead of `display: block` to make it work with `flex: 1` of the children
+  // This helps users focus on the editor by clicking on the broader area
+  .tab-pane.active {
+    display: flex;
+  }
+
   .cm-editor {
   .cm-editor {
     min-height: comment-inheritance.$codemirror-default-height !important;
     min-height: comment-inheritance.$codemirror-default-height !important;
     max-height: #{2 * comment-inheritance.$codemirror-default-height};
     max-height: #{2 * comment-inheritance.$codemirror-default-height};