Fix author card styling: solid background, full-width bio text, proportional avatar, and verified badge

[Copilot]

Description

UI/UX improvements to the blog post author card to match the reference design.

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

src/theme/BlogPostItem/Footer/styles.module.css

• Background: replaced CSS gradient on .authorCard with flat var(--ifm-color-emphasis-100) — matches the reference's clean solid-gray card
• Bio text: removed max-width: 68ch from .authorSummary — text now fills available card width
• Avatar: reduced .authorAvatar / .authorAvatarFallback from 84px → 64px — proportional to the reference layout
• Verified badge position: badge placed at bottom-right of the avatar (right: -2px, bottom: -2px) to match the reference design
• Verified badge color: set to #34D399 per design specification
• Verified badge style: updated to display: flex centering, size 20px for proper icon visibility

src/theme/BlogPostItem/Footer/index.tsx

• Verified badge icon: replaced the text ✓ character with a proper inline SVG checkmark path for a cleaner, crisper appearance matching the reference

Dependencies

None.

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices
• My changes do not generate new console warnings or errors .
• I ran npm run build and attached screenshot(s) in this PR.
• This is already assigned Issue to me, not an unassigned issue.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
recode-website	Ready	Preview, Comment	May 23, 2026 4:42am

[sanjay-kv]

@copilot

I want to get this icon correct

current

need to change like this below

sample code from reference website

                                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                                        </div>



element.style {
}
<style>
.bg-emerald-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
<style>
.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
<style>
.border-2 {
    border-width: 2px;
}
<style>
.rounded-full {
    border-radius: 9999px;
}
<style>
.justify-center {
    justify-content: center;
}
<style>
.items-center {
    align-items: center;
}
<style>
.w-6 {
    width: 1.5rem;
}
<style>
.h-6 {
    height: 1.5rem;
}
<style>
.flex {
    display: flex;
}
<style>
.-right-1 {
    right: -0.25rem;
}
<style>
.-bottom-1 {
    bottom: -0.25rem;
}
<style>
.absolute {
    position: absolute;
}
.justify-center {
.items-center {
.flex {
<style>
*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
<style>
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;

[Copilot]

@copilot

I want to get this icon correct
...

Fixed in commit 5fa0ee4. Two changes were made to match the reference:

1. Position: moved the badge from bottom-right to bottom-left of the avatar (right: -1px → left: -4px)
2. Icon: replaced the text ✓ character with a proper SVG checkmark path for a cleaner, crisper look

Here's the result:

The badge is now a green circle with an SVG checkmark at the bottom-left of the avatar, matching the reference design exactly.

[sanjay-kv]

@copilot I want this to come on the right side of the image.

like the below reference:

and the color should be #34D399

[Copilot]

@copilot I want this to come on the right side of the image.

...

Fixed in commit 3188419. Two changes applied:

1. Position: badge moved to bottom-right of the avatar (right: -2px, bottom: -2px)
2. Color: changed to #34D399 as specified