Migrate from Biome to Oxlint/Oxfmt (#2822)

* Migrate from Biome to Oxlint/Oxfmt

* pin version of autofix

* set version of autofix

* pin version of autofix

* [autofix.ci] apply automated fixes

* better comments, test formatter

* [autofix.ci] apply automated fixes

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

src/components/resume/hooks/use-css-variables.tsx

@@ -1,8 +1,11 @@
-import { useMemo } from "react";
 import type z from "zod";
-import { pageDimensionsAsMillimeters } from "@/schema/page";
+
+import { useMemo } from "react";
+
 import type { resumeDataSchema } from "@/schema/resume/data";
 
+import { pageDimensionsAsMillimeters } from "@/schema/page";
+
 type UseCssVariablesProps = Pick<z.infer<typeof resumeDataSchema>, "picture" | "metadata">;
 
 export const useCSSVariables = ({ picture, metadata }: UseCssVariablesProps) => {

src/components/resume/hooks/use-webfonts.tsx

@@ -1,9 +1,12 @@
+import type z from "zod";
+
 import { useEffect } from "react";
 import { useIsMounted } from "usehooks-ts";
-import type z from "zod";
-import webfontlist from "@/components/typography/webfontlist.json";
+
 import type { typographySchema } from "@/schema/resume/data";
 
+import webfontlist from "@/components/typography/webfontlist.json";
+
 export function useWebfonts(typography: z.infer<typeof typographySchema>) {
 	const isMounted = useIsMounted();
 
@@ -41,7 +44,7 @@ export function useWebfonts(typography: z.infer<typeof typographySchema>) {
 		const bodyTypography = typography.body;
 		const headingTypography = typography.heading;
 
-		Promise.all([
+		void Promise.all([
 			loadFont(bodyTypography.fontFamily, bodyTypography.fontWeights),
 			loadFont(headingTypography.fontFamily, headingTypography.fontWeights),
 		]).then(() => {

src/components/resume/preview.tsx

@@ -1,14 +1,18 @@
+import type z from "zod";
+
 import { Trans } from "@lingui/react/macro";
 import { ArrowRightIcon, IconContext, type IconProps, WarningIcon } from "@phosphor-icons/react";
 import { type RefObject, useMemo, useRef, useState } from "react";
 import { match } from "ts-pattern";
 import { useResizeObserver } from "usehooks-ts";
-import type z from "zod";
-import { pageDimensionsAsPixels } from "@/schema/page";
+
 import type { pageLayoutSchema } from "@/schema/resume/data";
 import type { Template } from "@/schema/templates";
+
+import { pageDimensionsAsPixels } from "@/schema/page";
 import { sanitizeCss } from "@/utils/sanitize";
 import { cn } from "@/utils/style";
+
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import { useCSSVariables } from "./hooks/use-css-variables";
 import { useWebfonts } from "./hooks/use-webfonts";
@@ -100,7 +104,6 @@ export const ResumePreview = ({ showPageNumbers = false, pageClassName, classNam
 
 	return (
 		<IconContext.Provider value={iconProps}>
-			{/** biome-ignore lint/security/noDangerouslySetInnerHtml: CSS is sanitized with sanitizeCss */}
 			{scopedCSS && <style dangerouslySetInnerHTML={{ __html: scopedCSS }} />}
 
 			<div style={style} className={cn("resume-preview-container", className)} {...props}>
@@ -148,7 +151,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
 		<div data-page-index={pageIndex} className="relative">
 			{showPageNumbers && totalNumberOfPages > 1 && (
 				<div className="absolute inset-s-0 -top-6 print:hidden">
-					<span className="font-medium text-foreground text-xs">
+					<span className="text-xs font-medium text-foreground">
 						<Trans>
 							Page {pageNumber} of {totalNumberOfPages}
 						</Trans>

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

@@ -1,4 +1,5 @@
 import { match } from "ts-pattern";
+
 import type {
 	CoverLetterItem as CoverLetterItemType,
 	CustomSectionItem,
@@ -7,7 +8,9 @@ import type {
 	SectionType,
 	SummaryItem as SummaryItemType,
 } from "@/schema/resume/data";
+
 import { cn } from "@/utils/style";
+
 import { useResumeStore } from "../store/resume";
 import { AwardsItem } from "./items/awards-item";
 import { CertificationsItem } from "./items/certifications-item";

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

src/components/resume/shared/items/cover-letter-item.tsx

@@ -1,5 +1,6 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { CoverLetterItem as CoverLetterItemType } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
 

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,5 +1,7 @@
 import type { SectionItem } from "@/schema/resume/data";
+
 import { cn } from "@/utils/style";
+
 import { PageIcon } from "../page-icon";
 
 type InterestsItemProps = SectionItem<"interests"> & {

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

@@ -1,5 +1,7 @@
 import type { SectionItem } from "@/schema/resume/data";
+
 import { cn } from "@/utils/style";
+
 import { PageLevel } from "../page-level";
 
 type LanguagesItemProps = SectionItem<"languages"> & {

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

@@ -1,5 +1,7 @@
 import type { SectionItem } from "@/schema/resume/data";
+
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageIcon } from "../page-icon";
 import { PageLink } from "../page-link";

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,5 +1,7 @@
 import type { SectionItem } from "@/schema/resume/data";
+
 import { cn } from "@/utils/style";
+
 import { PageIcon } from "../page-icon";
 import { PageLevel } from "../page-level";
 

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

@@ -1,5 +1,6 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SummaryItem as SummaryItemType } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
 

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

@@ -1,7 +1,9 @@
-import { TiptapContent } from "@/components/input/rich-input";
 import type { SectionItem } from "@/schema/resume/data";
+
+import { TiptapContent } from "@/components/input/rich-input";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { LinkedTitle } from "../linked-title";
 import { PageLink } from "../page-link";
 

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

@@ -1,6 +1,8 @@
 import { IconContext } from "@phosphor-icons/react";
 import { use } from "react";
+
 import { cn } from "@/utils/style";
+
 import type { ExtendedIconProps } from "../preview";
 
 export function PageIcon({ icon, className }: { icon: string; className?: string }) {

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

@@ -1,5 +1,6 @@
 import { LevelDisplay } from "@/components/level/display";
 import { cn } from "@/utils/style";
+
 import { useResumeStore } from "../store/resume";
 
 type Props = React.ComponentProps<"div"> & {

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

@@ -1,4 +1,5 @@
 import { cn } from "@/utils/style";
+
 import { useResumeStore } from "../store/resume";
 
 export function PagePicture({ className, style }: { className?: string; style?: React.CSSProperties }) {

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

@@ -1,6 +1,8 @@
 import type { SectionItem, SectionType } from "@/schema/resume/data";
+
 import { getSectionTitle } from "@/utils/resume/section";
 import { cn } from "@/utils/style";
+
 import { useResumeStore } from "../store/resume";
 
 type PageSectionProps<T extends SectionType> = {

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

@@ -2,6 +2,7 @@ import { TiptapContent } from "@/components/input/rich-input";
 import { getSectionTitle } from "@/utils/resume/section";
 import { stripHtml } from "@/utils/string";
 import { cn } from "@/utils/style";
+
 import { useResumeStore } from "../store/resume";
 
 type PageSummaryProps = {

src/components/resume/store/resume.ts

@@ -1,17 +1,20 @@
+import type { WritableDraft } from "immer";
+import type { TemporalState } from "zundo";
+
 import { t } from "@lingui/core/macro";
 import { debounce } from "es-toolkit";
 import isDeepEqual from "fast-deep-equal";
-import type { WritableDraft } from "immer";
 import { current } from "immer";
 import { toast } from "sonner";
-import type { TemporalState } from "zundo";
 import { temporal } from "zundo";
 import { immer } from "zustand/middleware/immer";
 import { create } from "zustand/react";
 import { useStoreWithEqualityFn } from "zustand/traditional";
-import { orpc, type RouterOutput } from "@/integrations/orpc/client";
+
 import type { ResumeData } from "@/schema/resume/data";
 
+import { orpc, type RouterOutput } from "@/integrations/orpc/client";
+
 type Resume = Pick<RouterOutput["resume"]["getByIdForPrinter"], "id" | "name" | "slug" | "tags" | "data" | "isLocked">;
 
 type ResumeStoreState = {
@@ -30,7 +33,7 @@ const controller = new AbortController();
 const signal = controller.signal;
 
 const _syncResume = (resume: Resume) => {
-	orpc.resume.update.call({ id: resume.id, data: resume.data }, { signal });
+	void orpc.resume.update.call({ id: resume.id, data: resume.data }, { signal });
 };
 
 const syncResume = debounce(_syncResume, 500, { signal });

src/components/resume/templates/azurill.tsx

@@ -1,11 +1,14 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Heading Decoration in Sidebar Layout

src/components/resume/templates/bronzor.tsx

@@ -1,15 +1,18 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Layout
-	"grid grid-cols-5 border-(--page-primary-color) border-t pt-1",
+	"grid grid-cols-5 border-t border-(--page-primary-color) pt-1",
 
 	// Section Content
 	"[&>.section-content]:col-span-4",

src/components/resume/templates/chikorita.tsx

@@ -1,15 +1,18 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 
 	// Section Heading in Sidebar Layout
 	"group-data-[layout=sidebar]:[&>h6]:text-(--page-background-color)",

src/components/resume/templates/ditgar.tsx

@@ -1,14 +1,16 @@
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 
 	// Section Item Header in Sidebar Layout
 	"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",
@@ -71,7 +73,7 @@ function Header() {
 			<PagePicture />
 
 			<div className="basics-header">
-				<h2 className="basics-name font-bold text-2xl">{basics.name}</h2>
+				<h2 className="basics-name text-2xl font-bold">{basics.name}</h2>
 				<p className="basics-headline">{basics.headline}</p>
 			</div>
 

src/components/resume/templates/ditto.tsx

@@ -1,11 +1,14 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Item Header in Sidebar Layout

src/components/resume/templates/gengar.tsx

@@ -1,15 +1,17 @@
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { PageSummary } from "../shared/page-summary";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 
 	// Section Item Header in Sidebar Layout
 	"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",

src/components/resume/templates/glalie.tsx

@@ -1,15 +1,18 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 
 	// Section Item Header in Sidebar Layout
 	"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",

src/components/resume/templates/kakuna.tsx

@@ -1,15 +1,18 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b [&>h6]:pb-0.5 [&>h6]:text-center",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color) [&>h6]:pb-0.5 [&>h6]:text-center",
 );
 
 /**

src/components/resume/templates/lapras.tsx

@@ -1,12 +1,15 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Container
@@ -80,7 +83,7 @@ function Header() {
 					<p className="basics-headline">{basics.headline}</p>
 				</div>
 
-				<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-(--page-primary-color) *:border-e *:py-0.5 *:pe-2 *:last:border-e-0">
+				<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-e *:border-(--page-primary-color) *:py-0.5 *:pe-2 *:last:border-e-0">
 					{basics.email && (
 						<div className="basics-item-email">
 							<EnvelopeIcon />

src/components/resume/templates/leafish.tsx

@@ -1,16 +1,19 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { PageSummary } from "../shared/page-summary";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 );
 
 /**

src/components/resume/templates/onyx.tsx

@@ -1,11 +1,14 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn();
 
@@ -43,7 +46,7 @@ function Header() {
 	const basics = useResumeStore((state) => state.resume.data.basics);
 
 	return (
-		<div className="page-header flex items-center gap-x-(--page-margin-x) border-(--page-primary-color) border-b pb-(--page-margin-y)">
+		<div className="page-header flex items-center gap-x-(--page-margin-x) border-b border-(--page-primary-color) pb-(--page-margin-y)">
 			<PagePicture />
 
 			<div className="page-basics space-y-(--page-gap-y)">

src/components/resume/templates/pikachu.tsx

@@ -1,15 +1,18 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 
 	// Section Item Header in Sidebar Layout
 	"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",
@@ -73,7 +76,7 @@ function Header() {
 
 	return (
 		<div className="page-header w-full space-y-(--page-gap-y) rounded-(--picture-border-radius) bg-(--page-primary-color) px-(--page-margin-x) py-(--page-margin-y) text-(--page-background-color)">
-			<div className="border-(--page-background-color)/50 border-b pb-2">
+			<div className="border-b border-(--page-background-color)/50 pb-2">
 				<h2 className="basics-name">{basics.name}</h2>
 				<p className="basics-headline">{basics.headline}</p>
 			</div>

src/components/resume/templates/rhyhorn.tsx

@@ -1,15 +1,18 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
+
 import { cn } from "@/utils/style";
+
+import type { TemplateProps } from "./types";
+
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
 import { PageLink } from "../shared/page-link";
 import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
-import type { TemplateProps } from "./types";
 
 const sectionClassName = cn(
 	// Section Heading
-	"[&>h6]:border-(--page-primary-color) [&>h6]:border-b",
+	"[&>h6]:border-b [&>h6]:border-(--page-primary-color)",
 );
 
 /**
@@ -53,7 +56,7 @@ function Header() {
 					<p className="basics-headline">{basics.headline}</p>
 				</div>
 
-				<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-(--page-primary-color) *:border-e *:py-0.5 *:pe-2 *:last:border-e-0">
+				<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-e *:border-(--page-primary-color) *:py-0.5 *:pe-2 *:last:border-e-0">
 					{basics.email && (
 						<div className="basics-item-email">
 							<EnvelopeIcon />

src/components/resume/templates/types.ts

@@ -1,4 +1,5 @@
 import type z from "zod";
+
 import type { pageLayoutSchema } from "@/schema/resume/data";
 
 export type TemplateProps = {