Vietue companion estimates fall off screen on mobile

[mosleyit]

As the description states

[mosleyit]

The overflowing element is the 4-column grid inside the Tippy tooltips in wasmegg/virtue-companion/src/components/TruthEggProgressBar.vue (lines 56–67 and 97–110):

<div class="grid grid-cols-[auto_auto_auto_1fr] gap-x-4">

Because the grid has no width constraint and lives inside an interactive Tippy popover, once the Duration column hits >100yr and Target Date shows After 2126, the tooltip content forces the popper wider than the mobile viewport and the rightmost column gets clipped off-screen.

Quick fix — constrain the grid and allow horizontal scrolling within the tooltip:

<div class="grid grid-cols-[auto_auto_auto_1fr] gap-x-4 max-w-[85vw] overflow-x-auto">

Apply to both occurrences (lines 56 and 97).

Better fix — Duration and Target Date are essentially the same information; once duration crosses the >100yr clamp, the date column collapses to a repeating After 2126. Either:

• Merge them into one column (Duration / Date), or
• Hide Target Date on narrow viewports via <div class="text-xs hidden sm:block">{{ targetDateTimes[index] }}</div> and the matching header.

That would also tighten the desktop layout. Happy to open a PR if useful.