fix(app): broken scroll in message list popouts (#49)

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 {

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>
 	);
 });

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 {

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 {

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);

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);

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}>

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}) => {

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 {

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;
 }