Adjust element hierarchy and CSS for better vertical alignment

src/sidebar/components/annotation-body.js

-import { createElement } from 'preact';
+import { Fragment, createElement } from 'preact';
 import { useState } from 'preact/hooks';
 import propTypes from 'prop-types';
 
@@ -32,27 +32,29 @@ export default function AnnotationBody({
     : 'Show the first few lines only';
 
   return (
-    <section className="annotation-body">
-      {!isEditing && (
-        <Excerpt
-          collapse={isCollapsed}
-          collapsedHeight={400}
-          inlineControls={false}
-          onCollapsibleChanged={setIsCollapsible}
-          onToggleCollapsed={setIsCollapsed}
-          overflowThreshold={20}
-        >
-          <MarkdownView
-            markdown={text}
-            textClass={{
-              'annotation-body__text': true,
-              'is-hidden': isHidden(annotation),
-              'has-content': text.length > 0,
-            }}
-          />
-        </Excerpt>
-      )}
-      {isEditing && <MarkdownEditor text={text} onEditText={onEditText} />}
+    <Fragment>
+      <section className="annotation-body">
+        {!isEditing && (
+          <Excerpt
+            collapse={isCollapsed}
+            collapsedHeight={400}
+            inlineControls={false}
+            onCollapsibleChanged={setIsCollapsible}
+            onToggleCollapsed={setIsCollapsed}
+            overflowThreshold={20}
+          >
+            <MarkdownView
+              markdown={text}
+              textClass={{
+                'annotation-body__text': true,
+                'is-hidden': isHidden(annotation),
+                'has-content': text.length > 0,
+              }}
+            />
+          </Excerpt>
+        )}
+        {isEditing && <MarkdownEditor text={text} onEditText={onEditText} />}
+      </section>
       {isCollapsible && !isEditing && (
         <div className="annotation-body__collapse-toggle">
           <Button
@@ -63,7 +65,7 @@ export default function AnnotationBody({
           />
         </div>
       )}
-    </section>
+    </Fragment>
   );
 }
 

src/styles/sidebar/components/annotation-body.scss

@@ -6,11 +6,9 @@
   // Margin between top of ascent of annotation body and
   // bottom of ascent of annotation-quote should be ~15px.
   margin-top: var.$layout-h-margin - 5px;
+  margin-bottom: var.$layout-h-margin;
   margin-right: 0px;
   margin-left: 0px;
-  .annotation-body__collapse-toggle-button {
-    background-color: transparent;
-  }
 }
 
 .annotation-body__text {
@@ -40,7 +38,12 @@
 }
 
 .annotation-body__collapse-toggle {
+  // Negative top margin to bring this up tight under `.annotation-body`
+  margin-top: -(var.$layout-h-margin - 5px);
   display: flex;
   justify-content: flex-end;
-  padding: 0.5em 0;
+
+  .annotation-body__collapse-toggle-button {
+    background-color: transparent;
+  }
 }