Merge pull request #206 from ZhenyaGoroh/fix-#204

Fixed #204

src/components/release-note.tsx

@@ -9,20 +9,10 @@ import { Accordion, AccordionItem } from "@radix-ui/react-accordion";
 import { AccordionContent, AccordionTrigger } from "./ui/accordion";
 import { ny } from "@/lib/utils";
 
-export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
+function DateContainer({ data }: { data: ReleaseNote }) {
 	const splitDate = data.date.split("/");
 	return (
-		<section
+		<>
-			className={ny(
-				"relative flex flex-col border-t lg:flex-row",
-				data.version == releaseNotes[0].version ? "mt-24 pt-24" : "mt-36 pt-36",
-			)}
-			id={data.version}
-		>
-			<StickyBox
-				className="mb-6 ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
-				offsetTop={120}
-			>
 			{moment({
 				year: parseInt(splitDate[2]),
 				month: parseInt(splitDate[1]) - 1,
@@ -63,8 +53,32 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
 					</div>
 				</div>
 			)}
+		</>
+	);
+}
+
+const dateContainerStyles =
+	"ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground";
+
+export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
+	return (
+		<section
+			className={ny(
+				"relative flex flex-col border-t lg:flex-row",
+				data.version == releaseNotes[0].version ? "mt-24 pt-24" : "mt-36 pt-36",
+			)}
+			id={data.version}
+		>
+			<StickyBox
+				className={ny("mb-0 hidden lg:block", dateContainerStyles)}
+				offsetTop={120}
+			>
+				<DateContainer data={data} />
 			</StickyBox>
-			<div className="px-5 md:px-0 md:px-10 md:pr-32">
+			<div className={ny("mb-6 block lg:hidden", dateContainerStyles)}>
+				<DateContainer data={data} />
+			</div>
+			<div className="px-5 md:px-10 md:pr-32">
 				<h1 className="text-3xl font-bold">
 					Release notes for {data.version} 🎉
 				</h1>