prevent title line wrapping

This commit is contained in:
Athou
2026-02-21 23:37:26 +01:00
parent b3d6ae467f
commit 1ce9d1b9b2

View File

@@ -35,6 +35,12 @@ const useStyles = tss.create(() => ({
sourceWebsiteLink: { sourceWebsiteLink: {
color: "inherit", color: "inherit",
textDecoration: "none", textDecoration: "none",
overflow: "hidden",
},
titleText: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}, },
})) }))
@@ -49,6 +55,7 @@ export function FeedEntriesPage(props: Readonly<FeedEntriesPageProps>) {
) )
const sourceLabel = useAppSelector(state => state.entries.sourceLabel) const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl) const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl)
const loading = useAppSelector(state => state.entries.loading)
const hasMore = useAppSelector(state => state.entries.hasMore) const hasMore = useAppSelector(state => state.entries.hasMore)
const mobile = useMobile() const mobile = useMobile()
const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible) const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
@@ -118,18 +125,26 @@ export function FeedEntriesPage(props: Readonly<FeedEntriesPageProps>) {
return ( return (
// add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding // add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding
<Box mb={viewport.height * 0.7}> <Box mb={viewport.height * 0.7}>
<Group className="cf-entries-title"> {!loading && (
{sourceWebsiteUrl && ( <Group className="cf-entries-title" wrap="nowrap">
<a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}> {sourceWebsiteUrl && (
<Title order={3}>{title}</Title> <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
</a> <Title order={3} className={classes.titleText}>
)} {title}
{!sourceWebsiteUrl && <Title order={3}>{title}</Title>} </Title>
<ActionIcon onClick={titleClicked} variant="subtle" color={theme.primaryColor}> </a>
<TbEdit size={18} /> )}
</ActionIcon> {!sourceWebsiteUrl && (
{showUnreadCount && <UnreadCount unreadCount={unreadCount} showIndicator={hasNewEntries} />} <Title order={3} className={classes.titleText}>
</Group> {title}
</Title>
)}
<ActionIcon onClick={titleClicked} variant="subtle" color={theme.primaryColor}>
<TbEdit size={18} />
</ActionIcon>
{showUnreadCount && <UnreadCount unreadCount={unreadCount} showIndicator={hasNewEntries} />}
</Group>
)}
<FeedEntries /> <FeedEntries />