diff --git a/src/timelines/CompactToot.tsx b/src/timelines/CompactToot.tsx index eb8a7b7..75320ea 100644 --- a/src/timelines/CompactToot.tsx +++ b/src/timelines/CompactToot.tsx @@ -1,12 +1,11 @@ import type { mastodon } from "masto"; -import { type Component } from "solid-js"; +import { Show, type Component } from "solid-js"; import tootStyle from "./toot.module.css"; import { formatRelative } from "date-fns"; import Img from "../material/Img"; import { Body2 } from "../material/typography"; -import { css } from "solid-styled"; import { appliedCustomEmoji } from "../masto/toot"; -import cardStyle from "../material/cards.module.css"; +import { TootPreviewCard } from "./RegularToot"; type CompactTootProps = { status: mastodon.v1.Status; @@ -48,6 +47,9 @@ const CompactToot: Component = (props) => { }} class={[tootStyle.compactTootContent].join(" ")} > + + + ); }; diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index b177b2d..d303c72 100644 --- a/src/timelines/Home.tsx +++ b/src/timelines/Home.tsx @@ -282,6 +282,12 @@ const Home: ParentComponent = (props) => { if (items.length > idx) { items.item(idx).scrollIntoView({ block: "start", behavior: "smooth" }); } + if (isTabFocus(idx)) { + items.item(idx).scrollTo({ + top: 0, + behavior: "smooth", + }); + } }; const openFullScreenToot = ( diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 24462a1..1912f90 100644 --- a/src/timelines/RegularToot.tsx +++ b/src/timelines/RegularToot.tsx @@ -197,10 +197,17 @@ function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) { ); } -function TootPreviewCard(props: { src: mastodon.v1.PreviewCard }) { +export function TootPreviewCard(props: { + src: mastodon.v1.PreviewCard; + alwaysCompact?: boolean; +}) { let root: HTMLAnchorElement; createEffect(() => { + if (props.alwaysCompact) { + root.classList.add(tootStyle.compact); + return; + } if (!props.src.width) return; const width = root.getBoundingClientRect().width; if (width > props.src.width) { diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index bc82522..92c4143 100644 --- a/src/timelines/toot.module.css +++ b/src/timelines/toot.module.css @@ -147,6 +147,7 @@ grid-template-columns: minmax(10%, 30%) 1fr; padding-left: 16px; padding-right: 16px; + padding-top: 8px; >img:first-child { grid-row: 1 / 3;