peter
48787af11c
At elevated zoom the CSS viewport shrinks; a long channel About wanted its fixed max-h-112 (448px) height, so when floating-ui flipped it above the trigger its top rendered above the viewport edge, clipped and unreachable (the inner overflow-y-auto can't scroll past its own top). Enable the popover's fitHeight so the `size` middleware caps the panel to the available space. Because the surface splits into an outer positioned element and an inner styled/scroll wrapper, the middleware now also publishes the available height as a --fit-max-h custom property the inner scroller consumes via maxHeight: min(28rem, var(--fit-max-h)), keeping the 28rem design cap on a tall viewport and shrinking to fit on a short one.
73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { api } from "../lib/api";
|
|
import ChannelAboutContent from "./ChannelAbout";
|
|
import { PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
|
|
|
|
/**
|
|
* A channel-description cell: one truncated line in the table, revealing the FULL channel "About"
|
|
* (the same content as the detail page's About tab — description, links, country, language, topics,
|
|
* keywords) in a glass hover card. The detail is fetched ON DEMAND on hover/focus, sharing the
|
|
* ["channel", id] react-query cache with the channel page, so the list stays light. The card is
|
|
* interactive (scrollable, links clickable) — the platform's safePolygon lets the cursor travel the
|
|
* gap, replacing the hand-rolled 160 ms hide-timer bridge. Shared by the subscribed + discovery
|
|
* tables.
|
|
*
|
|
* The card keeps the platform's default hover role (`tooltip`); making this rich, interactive panel
|
|
* properly keyboard-reachable belongs to R9 (focus/a11y), not to the mechanical migration.
|
|
*/
|
|
export default function AboutCell({ text, channelId }: { text: string | null; channelId: string }) {
|
|
const preview = (text ?? "").trim();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const pop = useAnchoredPopover({
|
|
open: open && !!preview,
|
|
onOpenChange: setOpen,
|
|
mode: "hover",
|
|
offset: 6,
|
|
// Pop instantly like the old cell did; the close grace lets the cursor reach the card.
|
|
hoverDelay: { open: 0, close: 160 },
|
|
// Cap the panel to the space between the trigger and the viewport edge (publishes --fit-max-h) so a
|
|
// long About never runs its top off-screen — at high browser zoom the short viewport made a fixed
|
|
// max-height overflow above the top edge, where the scroll container can't reach.
|
|
fitHeight: true,
|
|
});
|
|
|
|
const { data: ch } = useQuery({
|
|
queryKey: qk.channel(channelId),
|
|
queryFn: () => api.channelDetail(channelId),
|
|
enabled: open && !!channelId,
|
|
staleTime: 5 * 60_000,
|
|
});
|
|
|
|
if (!preview) return <span className="text-muted">—</span>;
|
|
|
|
return (
|
|
<>
|
|
<span
|
|
ref={pop.refs.setReference}
|
|
{...pop.getReferenceProps()}
|
|
tabIndex={0}
|
|
className="block max-w-88 truncate text-muted cursor-help rounded-sm outline-hidden focus-visible:outline-2 focus-visible:outline-accent/60 focus-visible:outline-offset-2"
|
|
>
|
|
{preview}
|
|
</span>
|
|
<PopoverSurface
|
|
popover={pop}
|
|
className="glass w-[480px] overflow-y-auto px-3.5 py-3 rounded-lg animate-[fadeIn_0.12s_ease]"
|
|
// min(design cap, available space): keeps the 28rem cap on a tall viewport, shrinks to fit on a
|
|
// short one (high zoom). --fit-max-h is set by the fitHeight `size` middleware once positioned.
|
|
style={{ maxHeight: "min(28rem, var(--fit-max-h, 28rem))" }}
|
|
>
|
|
{/* Full About once the detail loads; until then the list's truncated description. */}
|
|
{ch ? (
|
|
<ChannelAboutContent ch={ch} />
|
|
) : (
|
|
<p className="text-sm whitespace-pre-wrap wrap-break-word leading-relaxed">{preview}</p>
|
|
)}
|
|
</PopoverSurface>
|
|
</>
|
|
);
|
|
}
|