fix #2865, spacing between section items messed up

This commit is contained in:
Amruth Pillai
2026-04-04 20:59:30 +02:00
parent bcbe70d231
commit 145b17de0f
9 changed files with 247 additions and 249 deletions
@@ -45,9 +45,9 @@ export function AwardsItem({ className, ...item }: AwardsItemProps) {
<div className={cn("awards-item", className)}>
{/* Header */}
<div className="section-item-header awards-item-header">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}
@@ -45,9 +45,9 @@ export function CertificationsItem({ className, ...item }: CertificationsItemPro
<div className={cn("certifications-item", className)}>
{/* Header */}
<div className="section-item-header certifications-item-header">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}
@@ -52,9 +52,9 @@ export function EducationItem({ className, ...item }: EducationItemProps) {
<div className={cn("education-item", className)}>
{/* Header */}
<div className="section-item-header education-item-header mb-2">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}
@@ -51,9 +51,9 @@ export function ExperienceItem({ className, ...item }: ExperienceItemProps) {
<div className={cn("experience-item", className)}>
{/* Header */}
<div className="section-item-header experience-item-header">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}
@@ -65,11 +65,9 @@ export function ExperienceItem({ className, ...item }: ExperienceItemProps) {
<div className="experience-item-roles mt-0 flex flex-col gap-y-1">
{item.roles.map((role) => (
<div key={role.id} className="experience-item-role">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
<div className="section-item-metadata experience-item-role-position">{role.position}</div>
<div className="section-item-metadata experience-item-role-period text-end whitespace-nowrap">
{role.period}
</div>
<div className="section-item-metadata experience-item-role-period">{role.period}</div>
</div>
{stripHtml(role.description) && (
@@ -45,9 +45,9 @@ export function PublicationsItem({ className, ...item }: PublicationsItemProps)
<div className={cn("publications-item", className)}>
{/* Header */}
<div className="section-item-header publications-item-header">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}
@@ -40,9 +40,9 @@ export function ReferencesItem({ className, ...item }: ReferencesItemProps) {
<div className={cn("references-item", className)}>
{/* Header */}
<div className="section-item-header references-item-header">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}
@@ -45,9 +45,9 @@ export function VolunteerItem({ className, ...item }: VolunteerItemProps) {
<div className={cn("volunteer-item", className)}>
{/* Header */}
<div className="section-item-header volunteer-item-header">
<div className="grid grid-cols-2 items-start justify-between gap-x-2">
<div className="flex flex-wrap items-start justify-between gap-x-2">
{headerFields.map((field, index) => (
<div key={field.key} className={cn(index % 2 === 1 && "text-end whitespace-nowrap")}>
<div key={field.key} className={cn(index === 0 && "basis-full")}>
{field.content}
</div>
))}