diff --git a/front/src/components/entries/entry-line.tsx b/front/src/components/entries/entry-line.tsx index d15ccdd9..3cc7471b 100644 --- a/front/src/components/entries/entry-line.tsx +++ b/front/src/components/entries/entry-line.tsx @@ -17,6 +17,7 @@ import { ThumbnailBackground, tooltip, ts, + useIsTouch, } from "~/primitives"; import type { Layout } from "~/query"; import { cn, displayRuntime } from "~/utils"; @@ -59,6 +60,7 @@ export const EntryLine = ({ } & PressableProps) => { const [moreOpened, setMoreOpened] = useState(false); const { t } = useTranslation(); + const isTouch = useIsTouch(); return ( - + {tagline && {tagline}} - - - {videos.length > 1 && ( - { - e.preventDefault(); - onSelectVideos?.(); - }} - className="flex-row items-center rounded-2xl bg-popover p-2 md:mx-4" - {...tooltip(t("show.multiVideos"))} - > - - - {t("show.videosCount", { number: videos.length })} - - - )} + + {[ airDate @@ -131,6 +115,24 @@ export const EntryLine = ({ .filter((item) => item != null) .join(" ยท ")} + {videos.length > 1 && ( + { + e.preventDefault(); + onSelectVideos?.(); + }} + className="shrink grow-0 flex-row items-center rounded-2xl bg-popover p-2 md:mx-4" + {...tooltip(t("show.multiVideos"))} + > + + + {t("show.videosCount", { number: videos.length })} + + + )} setMoreOpened(v)} className={cn( - "ml-3 flex native:hidden", - "opacity-0 focus-visible:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100", + "ml-3 flex native:hidden self-end", + !isTouch && + "opacity-0 focus-visible:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100", moreOpened && "opacity-100", )} />