diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index 876a905c..fad73460 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/src/app/components/ReactionSummary.svelte
@@ -140,7 +140,7 @@
data-tip={tooltip}
class={cx(
reactionClass,
- "flex-inline btn btn-outline btn-neutral btn-xs flex items-center gap-1 rounded-full text-xs font-normal",
+ "flex-inline btn btn-outline btn-neutral btn-xs flex items-center gap-1 rounded-full text-xs font-normal bg-alt",
{
tooltip: !noTooltip && !isMobile,
"border-neutral-content/20": !isOwn,
@@ -162,7 +162,7 @@
data-tip={tooltip}
class={cx(
reactionClass,
- "flex-inline btn btn-outline btn-neutral btn-xs gap-1 rounded-full font-normal",
+ "flex-inline btn btn-outline btn-neutral btn-xs gap-1 rounded-full font-normal bg-alt",
{
tooltip: !noTooltip && !isMobile,
"border-neutral-content/20": !isOwn,
diff --git a/src/lib/html.ts b/src/lib/html.ts
index 44552506..2abdcd7c 100644
--- a/src/lib/html.ts
+++ b/src/lib/html.ts
@@ -47,9 +47,12 @@ export const createScroller = ({
if (container) {
// While we have empty space, fill it
const {scrollY, innerHeight} = window
- const {scrollHeight, scrollTop} = container
+ const {scrollHeight, scrollTop, clientHeight} = container
+ const viewHeight = clientHeight || innerHeight
const offset = Math.abs(scrollTop || scrollY)
- const shouldLoad = offset + innerHeight + threshold > scrollHeight
+ const shouldLoad = reverse
+ ? offset < threshold
+ : offset + viewHeight + threshold > scrollHeight
// Only trigger loading the first time we reach the threshold
if (shouldLoad) {
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index b64f76df..4e8f4b9b 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -46,13 +46,11 @@