fix height problems

src/app/cv/_components/CvEntry.tsx

@@ -1,17 +1,17 @@
+import type { ReactNode } from "react"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
 import { cn } from "~/lib/utils"
 import { format } from 'date-fns'
 import type { ArrayElement } from "type-fest"
 import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
-import { MDXRemote } from "next-mdx-remote/rsc";
+import AnimatedDiv from "~/app/_components/Animated/AnimatedDiv"
 import type { CvCategoryData } from "./CvCategory"
-import { ClientMdx } from "~/components/ClientMdx"
 
 export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
 
-export default function CvEntry({ entry, className, position = 0 }: {
+export default function CvEntry({ entry, description, className, position = 0 }: {
 	entry: CvEntryData,
+	description?: ReactNode,
 	className?: string,
 	position?: number
 }) {
@@ -27,11 +27,15 @@ export default function CvEntry({ entry, className, position = 0 }: {
 			}
 			{entry.description ?
 				<CardContent className="text-sm lg:text-base">
-					<AnimatePopUp once position={position + 0.2} debugId={`cv-entry-description:${entry.title}:${position + 0.2}`}>
+					{/* Fade the description in place instead of collapsing its height:
+					    the outer entry pop-up (CvCategory) measures height:auto when it
+					    plays, so the description must stay laid out at full height or the
+					    entry reveals too short. */}
+					<AnimatedDiv once position={position + 0.2} className="opacity-0" opacity={1} duration={0.5} debugId={`cv-entry-description:${entry.title}:${position + 0.2}`}>
 						<article className="prose prose-zinc dark:prose-invert max-w-none">
-							<ClientMdx source={entry.description} fallback={entry.description} />
+							{description ?? entry.description}
 						</article>
-					</AnimatePopUp>
+					</AnimatedDiv>
 				</CardContent> :
 				<></>
 			}