lot of bugfixes, better migration script

src/components/resume/shared/get-section-component.tsx

@@ -186,7 +186,7 @@ export function getSectionComponent(
 							style={{ gridTemplateColumns: `repeat(${customSection.columns}, 1fr)` }}
 						>
 							{visibleItems.map((item) => (
-								<div key={item.id} className={cn(`section-item section-item-${customSection.type} *:space-y-1`)}>
+								<div key={item.id} className={cn(`section-item section-item-${customSection.type}`)}>
 									{renderItemByType(customSection.type, item, itemClassName)}
 								</div>
 							))}

src/components/resume/shared/items/references-item.tsx

@@ -1,6 +1,7 @@
 import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
 import { cn } from "@/utils/style";
+import { PageLink } from "../page-link";
 
 type ReferencesItemProps = SectionItem<"references"> & {
 	className?: string;
@@ -9,12 +10,21 @@ type ReferencesItemProps = SectionItem<"references"> & {
 export function ReferencesItem({ className, ...item }: ReferencesItemProps) {
 	return (
 		<div className={cn("references-item", className)}>
-			<p className="section-item-name references-item-name">
-				<strong>{item.name}</strong>
-			</p>
+			<div className="section-item-header references-item-header">
+				<div className="flex items-center justify-between">
+					<p className="section-item-name references-item-name">
+						<strong>{item.name}</strong>
+					</p>
+				</div>
+				<p className="section-item-subtitle references-item-position">{item.position}</p>
+			</div>
 			<div className="section-item-description references-item-description">
 				<TiptapContent content={item.description} />
 			</div>
+			<div className="section-item-footer references-item-footer flex flex-col">
+				<div className="section-item-metadata references-item-phone">{item.phone}</div>
+				<PageLink {...item.website} label={item.website.label} className="section-item-link references-item-link" />
+			</div>
 		</div>
 	);
 }

src/components/resume/shared/page-level.tsx

@@ -1,4 +1,5 @@
 import { LevelDisplay } from "@/components/level/display";
+import { cn } from "@/utils/style";
 import { useResumeStore } from "../store/resume";
 
 type Props = React.ComponentProps<"div"> & {
@@ -8,5 +9,5 @@ type Props = React.ComponentProps<"div"> & {
 export function PageLevel({ level, className, ...props }: Props) {
 	const { icon, type } = useResumeStore((state) => state.resume.data.metadata.design.level);
 
-	return <LevelDisplay icon={icon} type={type} level={level} className={className} {...props} />;
+	return <LevelDisplay icon={icon} type={type} level={level} className={cn("h-4", className)} {...props} />;
 }

src/components/resume/shared/page-link.tsx

@@ -10,7 +10,7 @@ export function PageLink({ url, label, className }: Props) {
 	if (!url) return null;
 
 	return (
-		<a href={url} target="_blank" rel="noopener noreferrer" className={cn("inline-block text-wrap", className)}>
+		<a href={url} target="_blank" rel="noopener" className={cn("inline-block text-wrap", className)}>
 			{label || url}
 		</a>
 	);

src/components/resume/templates/lapras.tsx

@@ -33,7 +33,7 @@ export function LaprasTemplate({ pageIndex, pageLayout }: TemplateProps) {
 					"--heading-negative-margin": `${headingNegativeMargin}pt`,
 				} as React.CSSProperties
 			}
-			className="template-lapras page-content space-y-7 px-(--page-margin-x) py-(--page-margin-y)"
+			className="template-lapras page-content space-y-7 px-(--page-margin-x) py-(--page-margin-y) print:p-0"
 		>
 			{isFirstPage && <Header />}
 

src/components/resume/templates/pikachu.tsx

@@ -30,7 +30,11 @@ export function PikachuTemplate({ pageIndex, pageLayout }: TemplateProps) {
 					data-layout="sidebar"
 					className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-3"
 				>
-					{isFirstPage && <PagePicture className="max-h-full! max-w-full!" />}
+					{isFirstPage && (
+						<div className="flex items-center justify-center">
+							<PagePicture />
+						</div>
+					)}
 
 					{!fullWidth && (
 						<div className="shrink-0 space-y-4 overflow-x-hidden">