TootBottomSheet: fix title may have multiple lines
All checks were successful
/ depoly (push) Successful in 1m4s

This commit is contained in:
thislight 2024-10-09 15:52:14 +08:00
parent 49b7f2891b
commit 70649e97e6
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E

View file

@ -109,13 +109,11 @@ const TootBottomSheet: Component = (props) => {
}
});
const tootTitle = () => {
const tootDisplayName = () => {
const t = toot();
if (t) {
const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
return `${name}'s toot`;
return resolveCustomEmoji(t.account.displayName, t.account.emojis);
}
return "Someone's toot";
};
const actSession = () => {
@ -196,6 +194,18 @@ const TootBottomSheet: Component = (props) => {
.name :global(img) {
max-height: 1em;
}
.name {
display: grid;
grid-template-columns: 1fr auto;
height: calc(var(--title-size) * var(--title-line-height));
> :first-child {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
`;
return (
@ -217,11 +227,19 @@ const TootBottomSheet: Component = (props) => {
{pushedCount() > 0 ? <BackIcon /> : <CloseIcon />}
</IconButton>
<Title
component="div"
class="name"
use:solid-styled
>
<span
ref={(e: HTMLElement) =>
createRenderEffect(() => (e.innerHTML = tootTitle()))
createRenderEffect(
() => (e.innerHTML = tootDisplayName() ?? "Someone"),
)
}
></Title>
></span>
<span>'s toot</span>
</Title>
</Toolbar>
</AppBar>
}