Merge pull request #5120 from cardstack/cs-11331-tag-grey-peek-and-nudge

Author: lukemelia

packages/host/app/components/adorn/adorn-label.gts

@@ -69,7 +69,6 @@ const AdornLabel: TemplateOnlyComponent<AdornLabelSignature> = <template>
       border-radius: 0.3125rem 0 0 0.3125rem;
       clip-path: polygon(0 0, calc(100% - 0.8125rem) 0, 100% 100%, 0 100%);
       z-index: 1;
-      filter: drop-shadow(0 0.3125rem 0.5rem rgba(0, 0, 0, 0.2));
     }
     /* Mirrored polygon when the label flips below the card so the
        slope still points toward the card edge. */

packages/host/app/modifiers/position-adorn-label.ts

@@ -116,12 +116,12 @@ export function makePositionAdornLabel(
         anchorLeftX = cardRect.left - 4;
         label.style.maxWidth = 'max-content';
       }
-      // When flipped below, overlap the card by 2px so the flag's wide
-      // top edge tucks under the bottom outline stroke and reads as
-      // attached. (Anchoring it 2px below the card instead left a
-      // visible gap under the stroke.)
+      // When flipped below, sit the flag's top edge flush with the card's
+      // bottom edge — no overlap into the card (any overlap reads as the tag
+      // riding too high over the edge), and no gap (its z-index keeps it
+      // above the selection outline stroke, so it still reads as attached).
       let anchorTopY =
-        side === 'top' ? cardRect.top - labelHeight - 2 : cardRect.bottom - 2;
+        side === 'top' ? cardRect.top - labelHeight - 2 : cardRect.bottom;
 
       // The label's anchor positions (anchorLeftX, anchorTopY) are in
       // viewport coordinates. With `position: absolute`, the inline