Stick user header to stop

src/site/api/routes.js

@@ -4,6 +4,11 @@ const {fetchUser, getOrFetchShortcode, userRequestCache, history} = require("../
 const {render, redirect} = require("pinski/plugins")
 const {pugCache} = require("../passthrough")
 
+/** @param {import("../../lib/structures/TimelineEntry")} post */
+function getPageTitle(post) {
+	return (post.getCaptionIntroduction() || `Post from @${post.getBasicOwner().username}`) + " | Bibliogram"
+}
+
 module.exports = [
 	{
 		route: "/", methods: ["GET"], code: async () => {
@@ -124,7 +129,7 @@ module.exports = [
 					statusCode: 200,
 					contentType: "application/json",
 					content: {
-						title: post.getCaptionIntroduction(),
+						title: getPageTitle(post),
 						html: pugCache.get("pug/fragments/post.pug").web({post})
 					}
 				}
@@ -165,7 +170,10 @@ module.exports = [
 				await post.fetchChildren()
 				await post.fetchExtendedOwnerP() // serial await is okay since intermediate fetch result is cached
 				if (post.isVideo()) await post.fetchVideoURL()
-				return render(200, "pug/post.pug", {post})
+				return render(200, "pug/post.pug", {
+					title: getPageTitle(post),
+					post
+				})
 			}).catch(error => {
 				if (error === constants.symbols.NOT_FOUND) {
 					return render(404, "pug/friendlyerror.pug", {

src/site/pug/includes/post.pug

@@ -16,6 +16,8 @@ mixin post(post, headerWithNavigation)
 						img(src="/static/img/arrow-circled.svg" alt="Previous post." style="transform: rotate(180deg)").icon
 					button.navigate-posts.next
 						img(src="/static/img/arrow-circled.svg" alt="Next post.").icon
+			div.relative-box
+				div.scrolling-box
 					if post.getCaption()
 						p.structured-text.description
 							+display_structured(post.getStructuredCaption())

src/site/pug/post.pug

@@ -1,14 +1,11 @@
+//- Needs title, post
+
 include includes/post
 
 doctype html
 html
 	head
-		title
+		title= title
-			if post.getCaptionIntroduction()
-				=post.getCaptionIntroduction()
-			else
-				=`Post from @${post.getBasicOwner().username}`
-			=` | Bibliogram`
 		include includes/head
 		script(type="module" src="/static/js/post_overlay.js")
 	body.post-page

src/site/sass/main.sass

@@ -233,16 +233,16 @@ body
 
 	.description-section
 		display: grid
-		align-items: start
+		align-items: stretch
-		align-content: normal
+		align-content: stretch
-		background-color: #eee
+		grid-template-rows: auto 1fr
 		position: sticky
 		top: 0
 		height: 100vh
-		overflow-y: auto
 		box-sizing: border-box
 
 		@media screen and (max-width: $layout-a-max)
+			display: contents // this is absolutely disgusting
 			position: inherit
 			top: inherit
 			height: inherit
@@ -254,6 +254,8 @@ body
 			justify-content: center
 			background-color: #b3b3b3
 			padding: 10px
+			position: sticky
+			top: 0
 
 			.navigate-posts
 				-webkit-appearance: none
@@ -291,6 +293,21 @@ body
 					&:hover
 						text-decoration: underline
 
+		.relative-box
+			background-color: #eee
+
+		@media screen and (min-width: $layout-b-min)
+			.relative-box
+				position: relative
+
+				.scrolling-box
+					position: absolute
+					top: 0
+					bottom: 0
+					overflow-y: auto
+					display: grid
+					align-items: center
+
 		.description
 			margin: 12px
 			white-space: pre-line
@@ -298,6 +315,8 @@ body
 			font-size: 20px
 			line-height: 1.4
 			unicode-bidi: plaintext
+			@media screen and (min-width: $layout-b-min)
+				padding-bottom: 20px
 
 			@media screen and (max-width: $layout-a-max)
 				font-size: 18px
@@ -312,6 +331,7 @@ body
 
 		@media screen and (max-width: $layout-a-max)
 			flex: 1
+			position: relative
 
 		.sized-image, .sized-video
 			color: #eee
@@ -524,7 +544,7 @@ body
 	bottom: 0
 	background: rgba(0, 0, 0, 0.7)
 	z-index: 10
-	overflow-y: auto
+	overflow-y: scroll
 
 	&:not(.loading) > *
 		min-height: 100vh