Clean up and stick sidebar footer in `infinite-scroll` (#5319)

Co-authored-by: Kid <git@xuann.wang>

2 files changed, 9 insertions, 3 deletions

diff --git a/source/features/infinite-scroll.css b/source/features/infinite-scroll.css
new file mode 100644
index 00000000..06ef5d2a
--- /dev/null
+++ b/source/features/infinite-scroll.css
@@ -0,0 +1,4 @@
+aside[aria-label='Explore'] > .footer {
+	position: sticky !important;
+	top: 24px;
+}
diff --git a/source/features/infinite-scroll.tsx b/source/features/infinite-scroll.tsx
index a324b80a..d4060f7f 100644
--- a/source/features/infinite-scroll.tsx
+++ b/source/features/infinite-scroll.tsx
@@ -1,3 +1,4 @@
+import './infinite-scroll.css';
 import React from 'dom-chef';
 import select from 'select-dom';
 import onetime from 'onetime';
@@ -36,9 +37,8 @@ function init(): void {
 	});
 
 	// Use cloneNode to keep the original ones for responsive layout
-	const feedFooter = select('.news > .f6')!.cloneNode(true);
+	const feedLink = select('.news a.f6')!.cloneNode(true);
 	const footer = select('.footer > .d-flex')!.cloneNode(true);
-	footer.classList.add('mt-3');
 
 	for (const child of footer.children) {
 		child.classList.remove('pl-lg-4', 'col-xl-3');
@@ -46,7 +46,9 @@ function init(): void {
 
 	select('[aria-label="Explore"]')!.append(
 		<div className="footer">
-			{feedFooter}
+			<div>
+				{feedLink}
+			</div>
 			{footer}
 		</div>,
 	);