Show add content button on hover or focus of content block (#876)

* Show add content button on hover or focus of content block

* Updating UI to make the overlay textarea to be consitent

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>

webapp/src/components/cardDetail/cardDetail.scss

@@ -55,14 +55,19 @@
         }
     }
 
-    &.add-content {
-        .Button {
-            opacity: 0;
-            color: rgba(var(--body-color), 0.6);
+    &.content-blocks {
+        &:hover, &:focus-within {
+            .CardDetailContentsMenu {
+                .Button {
+                    opacity: 1;
+                }
+            }
         }
-        &:hover {
+        .CardDetailContentsMenu {
+            margin-left: 48px;
             .Button {
-                opacity: 1;
+                opacity: 0;
+                color: rgba(var(--body-color), 0.6);
             }
         }
     }

webapp/src/components/cardDetail/cardDetail.tsx

@@ -139,17 +139,16 @@ const CardDetail = (props: Props): JSX.Element|null => {
 
             {/* Content blocks */}
 
-            <div className='CardDetail content fullwidth'>
+            <div className='CardDetail content fullwidth content-blocks'>
                 <CardDetailContents
                     card={props.card}
                     contents={props.contents}
                     readonly={props.readonly}
                 />
+                {!props.readonly &&
+                    <CardDetailContentsMenu card={props.card}/>
+                }
             </div>
-
-            {!props.readonly &&
-                <CardDetailContentsMenu card={props.card}/>
-            }
         </>
     )
 }

webapp/src/components/cardDetail/cardDetailContents.tsx

@@ -209,7 +209,7 @@ const CardDetailContents = React.memo((props: Props) => {
         )
     }
     return (
-        <div className='octo-content'>
+        <div className='octo-content CardDetailContents'>
             <div className='octo-block'>
                 <div className='octo-block-margin'/>
                 {!props.readonly &&

webapp/src/components/cardDetail/cardDetailContentsMenu.tsx

@@ -55,7 +55,7 @@ type Props = {
 const CardDetailContentsMenu = React.memo((props: Props) => {
     const intl = useIntl()
     return (
-        <div className='CardDetail content add-content'>
+        <div className='CardDetailContentsMenu content add-content'>
             <MenuWrapper>
                 <Button>
                     <FormattedMessage

webapp/src/components/contentBlock.scss

@@ -16,6 +16,7 @@
     > * {
         flex: 1 1 auto;
         max-width: 100%;
+        min-height: 32px;
     }
     > .octo-block-margin {
         flex: 0 0 auto;
@@ -32,4 +33,4 @@
 
 .addToRow {
     width: 10px;
-}
+}

webapp/src/components/markdownEditor.scss

@@ -16,6 +16,14 @@
         word-break: break-word;
     }
 
+    .CodeMirror-code {
+        line-height: 24px;
+    }
+
+    .CodeMirror-lines {
+        padding: 0;
+    }
+
     .CodeMirror,
     .CodeMirror-scroll {
         flex: 1;