mirror of
https://github.com/Athou/commafeed.git
synced 2026-10-07 04:44:50 +00:00
fix wrapping of long titles
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user