diff --git a/fluxer_app/src/components/popouts/ChannelPinsPopout.module.css b/fluxer_app/src/components/popouts/ChannelPinsPopout.module.css
index 2f823ba7..32e6eb77 100644
--- a/fluxer_app/src/components/popouts/ChannelPinsPopout.module.css
+++ b/fluxer_app/src/components/popouts/ChannelPinsPopout.module.css
@@ -18,12 +18,14 @@
  */
 
 .container {
+	--pins-popout-max-height: min(calc(100vh - 120px), 720px);
+	--pins-popout-header-height: 68px;
 	position: relative;
 	display: flex;
-	max-height: min(calc(100vh - 120px), 720px);
-	min-height: 200px;
 	width: 480px;
 	flex-direction: column;
+	min-height: 200px;
+	max-height: var(--pins-popout-max-height);
 	overflow: hidden;
 	border-radius: var(--radius-md);
 	border: 1px solid var(--background-header-secondary);
@@ -36,6 +38,17 @@
 	align-items: center;
 	gap: 0.25rem;
 	padding: 1rem;
+	min-height: var(--pins-popout-header-height);
+}
+
+.body {
+	flex: 1 1 0%;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+	max-height: calc(var(--pins-popout-max-height) - var(--pins-popout-header-height));
 }
 
 .title {
diff --git a/fluxer_app/src/components/popouts/ChannelPinsPopout.tsx b/fluxer_app/src/components/popouts/ChannelPinsPopout.tsx
index 20a518a0..0ed2554e 100644
--- a/fluxer_app/src/components/popouts/ChannelPinsPopout.tsx
+++ b/fluxer_app/src/components/popouts/ChannelPinsPopout.tsx
@@ -32,7 +32,9 @@ export const ChannelPinsPopout = observer(({channel}: {channel: ChannelRecord})
 				<PushPinIcon className={styles.iconLarge} />
 				<h1 className={styles.title}>{t`Pinned Messages`}</h1>
 			</div>
-			<ChannelPinsContent channel={channel} />
+			<div className={styles.body}>
+				<ChannelPinsContent channel={channel} />
+			</div>
 		</div>
 	);
 });
diff --git a/fluxer_app/src/components/popouts/InboxPopout.module.css b/fluxer_app/src/components/popouts/InboxPopout.module.css
index dc6bbb47..1d83559e 100644
--- a/fluxer_app/src/components/popouts/InboxPopout.module.css
+++ b/fluxer_app/src/components/popouts/InboxPopout.module.css
@@ -98,13 +98,15 @@
 	display: flex;
 	min-height: 0;
 	flex: 1 1 0%;
+	overflow: hidden;
 }
 
 .tabContent {
-	position: absolute;
-	inset: 0;
 	display: flex;
 	flex-direction: column;
+	flex: 1 1 0%;
+	min-height: 0;
+	overflow: hidden;
 }
 
 .iconSmall {
diff --git a/fluxer_app/src/components/popouts/RecentMentionsContent.module.css b/fluxer_app/src/components/popouts/RecentMentionsContent.module.css
index 16380123..35394b5d 100644
--- a/fluxer_app/src/components/popouts/RecentMentionsContent.module.css
+++ b/fluxer_app/src/components/popouts/RecentMentionsContent.module.css
@@ -51,10 +51,13 @@
 }
 
 .scroller {
+	flex: 1;
+	min-height: 0;
+	min-width: 0;
 	max-height: 700px;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 8px;
+	padding-block: 8px;
+	padding-inline-start: 12px;
+	padding-inline-end: 0;
 }
 
 .groupContainer {
diff --git a/fluxer_app/src/components/popouts/RecentMentionsContent.tsx b/fluxer_app/src/components/popouts/RecentMentionsContent.tsx
index 0b4ce701..ef0a80cb 100644
--- a/fluxer_app/src/components/popouts/RecentMentionsContent.tsx
+++ b/fluxer_app/src/components/popouts/RecentMentionsContent.tsx
@@ -193,7 +193,7 @@ export const RecentMentionsContent = observer(
 				className={styles.scroller}
 				onScroll={handleScroll}
 				key="recent-mentions-scroller"
-				reserveScrollbarTrack={false}
+				reserveScrollbarTrack
 			>
 				{accessibleMentions.map((message) => {
 					const channel = ChannelStore.getChannel(message.channelId);
diff --git a/fluxer_app/src/components/popouts/SavedMessagesContent.tsx b/fluxer_app/src/components/popouts/SavedMessagesContent.tsx
index 3a9bcc9c..55221c05 100644
--- a/fluxer_app/src/components/popouts/SavedMessagesContent.tsx
+++ b/fluxer_app/src/components/popouts/SavedMessagesContent.tsx
@@ -69,7 +69,7 @@ export const SavedMessagesContent = observer(() => {
 	}
 
 	return (
-		<Scroller className={previewStyles.scroller} key="saved-messages-scroller" reserveScrollbarTrack={false}>
+		<Scroller className={previewStyles.scroller} key="saved-messages-scroller" reserveScrollbarTrack>
 			{missingSavedMessages.map((entry) => renderMissingSavedMessage(entry.id))}
 			{savedMessages.map((message) => {
 				const channel = ChannelStore.getChannel(message.channelId);
diff --git a/fluxer_app/src/components/popouts/ScheduledMessagesContent.tsx b/fluxer_app/src/components/popouts/ScheduledMessagesContent.tsx
index c9294f8a..a1bcf28a 100644
--- a/fluxer_app/src/components/popouts/ScheduledMessagesContent.tsx
+++ b/fluxer_app/src/components/popouts/ScheduledMessagesContent.tsx
@@ -84,7 +84,7 @@ export const ScheduledMessagesContent = observer(() => {
 	};
 
 	return (
-		<Scroller className={previewStyles.scroller} key="scheduled-messages-scroller" reserveScrollbarTrack={false}>
+		<Scroller className={previewStyles.scroller} key="scheduled-messages-scroller" reserveScrollbarTrack>
 			{scheduledMessages.map((message) => (
 				<div key={message.id} className={previewStyles.previewCard}>
 					<div className={styles.cardHeader}>
diff --git a/fluxer_app/src/components/shared/ChannelPinsContent.tsx b/fluxer_app/src/components/shared/ChannelPinsContent.tsx
index da8e6741..64eb1a78 100644
--- a/fluxer_app/src/components/shared/ChannelPinsContent.tsx
+++ b/fluxer_app/src/components/shared/ChannelPinsContent.tsx
@@ -153,7 +153,7 @@ export const ChannelPinsContent = observer(({channel, onJump}: ChannelPinsConten
 				className={clsx(previewStyles.scroller, mobileLayout.enabled && previewStyles.scrollerMobile)}
 				key="channel-pins-scroller"
 				onScroll={handleScroll}
-				reserveScrollbarTrack={false}
+				reserveScrollbarTrack
 			>
 				{mobileLayout.enabled && <div className={previewStyles.topSpacer} />}
 				{pinnedPins.slice().map(({message}) => {
diff --git a/fluxer_app/src/components/shared/MessagePreview.module.css b/fluxer_app/src/components/shared/MessagePreview.module.css
index d7fa33ce..32695fea 100644
--- a/fluxer_app/src/components/shared/MessagePreview.module.css
+++ b/fluxer_app/src/components/shared/MessagePreview.module.css
@@ -104,7 +104,9 @@
 	flex: 1;
 	min-height: 0;
 	min-width: 0;
-	padding: 8px;
+	padding-block: 8px;
+	padding-inline-start: 12px;
+	padding-inline-end: 0;
 }
 
 .scrollerMobile {
diff --git a/fluxer_app/src/components/uikit/Scroller.module.css b/fluxer_app/src/components/uikit/Scroller.module.css
index 7fd3afaf..180128cb 100644
--- a/fluxer_app/src/components/uikit/Scroller.module.css
+++ b/fluxer_app/src/components/uikit/Scroller.module.css
@@ -24,6 +24,7 @@
 	min-height: 0;
 	min-width: 0;
 	height: 100%;
+	max-height: inherit;
 	flex: 1 1 0%;
 	padding-inline-end: var(--scroller-track-size);
 }
@@ -34,6 +35,7 @@
 	min-height: 0;
 	min-width: 0;
 	height: 100%;
+	max-height: inherit;
 	flex: 1 1 0%;
 	overscroll-behavior: contain;
 	overflow-anchor: none;
@@ -115,9 +117,7 @@
 
 .scrollerChildren {
 	display: flex;
-	flex: 1 1 0%;
 	flex-direction: column;
-	min-height: 0;
 	min-width: 0;
 }