Cannot tap HoverCard on mobile

[lilouartz]

https://pillser.com/probiotics/lactobacillus-casei

Try tapping on "X studies" on mobile.

I would expect tooltip:

Here is my code:

const HealthOutcomeListMember = ({
  healthOutcome,
}: {
  healthOutcome: HealthOutcome;
}) => {
  const effectSize = calculateEffectSize(
    healthOutcome.insights.map((insight) => insight.effectSize),
  );

  return (
    <li
      className={css({
        alignItems: 'center',
        background: '#e2f9f3',
        border: '1px solid #1cb08f',
        borderRadius: '4px',
        display: 'flex',
        fontSize: '14px',
        gap: '8px',
        lineHeight: '1.2',
        padding: '8px',
      })}
      key={healthOutcome.id}
    >
      <EffectSize effectSize={effectSize} />

      <span
        className={css({
          _after: {
            content: '", "',
          },
          marginRight: 'auto',
        })}
      >
        {healthOutcome.name}
      </span>

      <div
        className={css({
          alignItems: 'center',
          display: 'flex',
          gap: '4px',
        })}
      >
        <HoverCard.Root openDelay={0}>
          <HoverCard.Trigger asChild>
            <span
              className={css({
                alignItems: 'center',
                color: '#256e47',
                cursor: 'pointer',
                display: 'flex',
                fontSize: '14px',
                textDecoration: 'underline',
              })}
            >
              {healthOutcome.insights.length === 1
                ? '1 study'
                : healthOutcome.insights.length + ' studies'}
            </span>
          </HoverCard.Trigger>

          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              <ul
                className={css({
                  display: 'flex',
                  flexFlow: 'column',
                  gap: '16px',
                })}
              >
                {healthOutcome.insights.slice(0, 5).map((insight) => {
                  return (
                    <li
                      className={css({
                        display: 'flex',
                        flexFlow: 'column',
                        gap: '4px',
                      })}
                      key={insight.id}
                    >
                      <div
                        className={css({
                          background: '#eee',
                          borderRadius: '4px',
                          fontSize: '14px',
                          padding: '8px',
                        })}
                      >
                        {insight.excerpt}
                      </div>

                      <div
                        className={css({
                          '& span': {
                            _after: {
                              content: '", "',
                            },
                          },
                          // display: 'flex',
                          // flexFlow: 'row wrap',
                          fontSize: '10px',
                        })}
                      >
                        <span>{insight.researchPaper.primaryAuthor}</span>
                        <span>{insight.researchPaper.year}</span>
                        <span>{insight.researchPaper.title}</span>
                        <span>
                          <Link
                            className={css({
                              color: '#256e47',

                              textDecoration: 'underline',
                            })}
                            to={getUrl('/research-papers/:slug', {
                              slug:
                                insight.researchPaper.slug +
                                '-' +
                                insight.researchPaper.id,
                            })}
                          >
                            {insight.researchPaper.doi}
                          </Link>
                        </span>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </HoverCard.Content>
          </HoverCard.Positioner>
        </HoverCard.Root>
      </div>
    </li>
  );
};