Move margin between `ThreadCard`s to `ThreadList`

Move the bottom margin on thread cards from the root `<div>` rendered by
`ThreadCard` to the wrapper div that contains it rendered by
`ThreadList`.

Aside from making conceptual sense that the list component controls the
spacing of list items, this also fixes an issue where the thread list
would sometimes jump when scrolling. This happened because the height of
individual threads was computed by calling `getElementHeightWithMargins`
on the wrapper div, which only accounted for margins on the wrapper div,
not margins on descendants. Note that due to margin collapsing, the descendant
margins did not contribute to the `getBoundingClientRect()` of the
wrapper div.

src/sidebar/components/thread-list.js

@@ -177,7 +177,7 @@ function ThreadList({ thread, $rootScope }) {
     <section>
       <div style={{ height: offscreenUpperHeight }} />
       {visibleThreads.map(child => (
-        <div id={child.id} key={child.id}>
+        <div className="thread-list__card" id={child.id} key={child.id}>
           <ThreadCard thread={child} />
         </div>
       ))}

src/sidebar/util/dom.js

@@ -2,6 +2,10 @@
  * Obtain the pixel height of the provided DOM element, including
  * top and bottom margins.
  *
+ * Note that this function *only* accounts for margins on `element`, not any
+ * descendants which may contribute to the effective margin due to CSS "margin
+ * collapsing".
+ *
  * @param {Element} element - DOM element to measure
  * @return {number|null} - The element's height in pixels
  */

src/styles/sidebar/components/thread-card.scss

 @use "../../variables" as var;
 
 .thread-card {
-  margin-bottom: 1em;
   padding: 1em;
   border-radius: 2px;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);

src/styles/sidebar/components/thread-list.scss

+.thread-list__card {
+  margin-bottom: 1em;
+}

src/styles/sidebar/sidebar.scss

@@ -63,6 +63,7 @@
 @use './components/tag-list';
 @use './components/thread';
 @use './components/thread-card';
+@use './components/thread-list';
 @use './components/toast-messages';
 @use './components/tooltip';
 @use './components/top-bar';