Style review list correctly with pixelated corners

src/components/ReviewTeaser.svelte

@@ -21,9 +21,17 @@
     review: Review;
     rid: string;
     status: PatchStatus | undefined;
+    first?: boolean;
+    last?: boolean;
   }
 
-  const { patchId, review, rid, status }: Props = $props();
+  const { patchId, review, rid, status, first, last }: Props = $props();
+  const style = $derived(
+    (first && last && "--local-clip-path: var(--2px-corner-fill)") ||
+      (first && "--local-clip-path: var(--2px-top-corner-fill)") ||
+      (last && "--local-clip-path: var(--2px-bottom-corner-fill)") ||
+      "",
+  );
 </script>
 
 <style>
@@ -41,7 +49,7 @@
     z-index: -1;
     content: " ";
     background-color: var(--color-fill-float);
-    clip-path: var(--2px-corner-fill);
+    clip-path: var(--local-clip-path);
     width: 100%;
     height: 100%;
     top: 0;
@@ -92,6 +100,7 @@
   tabindex="0"
   role="button"
   class="review"
+  {style}
   style:cursor="pointer"
   onclick={() => {
     void push({

src/components/Reviews.svelte

@@ -74,6 +74,12 @@
   .hide {
     display: none;
   }
+  .review-list {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
 </style>
 
 <div style:margin={hideReviews ? "1.5rem 0" : "1.5rem 0 2.5rem 0"}>
@@ -119,9 +125,15 @@
   </div>
 
   {#if revision.reviews && revision.reviews.length}
-    <div class:hide={hideReviews} style:margin-top="1rem">
-      {#each revision.reviews as review}
-        <ReviewTeaser {rid} {review} {patchId} {status} />
+    <div class:hide={hideReviews} class="review-list">
+      {#each revision.reviews as review, idx}
+        <ReviewTeaser
+          {rid}
+          {review}
+          {patchId}
+          {status}
+          first={idx === 0}
+          last={idx === revision.reviews.length - 1} />
       {/each}
     </div>
   {/if}