Why are there two height rules for the same element? The height: 10px can be deleted as the height: 8px should override any styling caused by the prior height rule.

I'd prefer to avoid ternary that returns JSX like this. I realize the rules around when to use ternary syntax are pretty complex, so I wrote up a note with everything spelled out

To follow up on this -- when you say "avoid ternary that returns JSX," does that include the logical && syntax? From the React Docs:

The code could then be revised to:

{extendArrow && <div className={css.threadArrowExtender} />}

If not, however, then above the return statement it would just be

let arrowExtender;
if (extendArrow) {
  arrowExtender = <div className={css.threadArrowExtender} />;
} else {
  arrowExtender = null;
}

Good question – yeah the intention is to include that sort of syntax. The rule is about surfacing conditionals clearly to the reader