fix wrapping of long titles

This commit is contained in:
Athou
2026-06-12 10:10:02 +02:00
parent e89ccfd74b
commit 1efd04f6c5

View File

@@ -1,20 +1,30 @@
import { Highlight } from "@mantine/core" import { Highlight } from "@mantine/core"
import { useAppSelector } from "@/app/store" import { useAppSelector } from "@/app/store"
import type { Entry } from "@/app/types" import type { Entry } from "@/app/types"
import { tss } from "@/tss"
export interface FeedEntryTitleProps { export interface FeedEntryTitleProps {
entry: Entry entry: Entry
} }
const useStyles = tss.create(() => ({
content: {
textWrap: "inherit",
},
}))
export function FeedEntryTitle(props: Readonly<FeedEntryTitleProps>) { export function FeedEntryTitle(props: Readonly<FeedEntryTitleProps>) {
const search = useAppSelector(state => state.entries.search) const search = useAppSelector(state => state.entries.search)
const keywords = search?.split(" ") const keywords = search?.split(" ")
const { classes } = useStyles()
return ( return (
<Highlight <Highlight
inherit inherit
highlight={keywords ?? ""} highlight={keywords ?? ""}
// make sure ellipsis is shown when title is too long // make sure ellipsis is shown when title is too long
span span
className={classes.content}
> >
{props.entry.title} {props.entry.title}
</Highlight> </Highlight>