style(footer): improve styling of Netlify badge alt-text fallback in footer

[SHUBHANSHU602]

What changed

This PR makes a small CSS-only adjustment to the Netlify badge image in the footer to improve the appearance of the alt-text fallback when the image fails to load.

Why

When the image cannot be loaded, browsers render the broken image icon together with the alt text. Previously, this fallback looked unpolished due to lack of spacing and text emphasis.
This change improves readability and visual clarity without altering behavior or layout.

Scope

• CSS-only change
• No logic or structural updates
• No impact when the image loads successfully

Related issue
#4921

Summary by CodeRabbit

• Style
  • Enhanced footer badge styling with improved alignment and text presentation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	641f479
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/696ae003c3364d000806f601
😎 Deploy Preview	https://deploy-preview-4967--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Footer component's Netlify badge image styling has been updated by replacing a single className "inline" with "inline-block align-middle ml-3 text-sm font-medium text-cool-gray", enhancing layout alignment and text presentation without modifying component behavior.

Changes

Cohort / File(s)	Summary
Netlify Badge Styling components/footer/Footer.tsx	Updated className from "inline" to "inline-block align-middle ml-3 text-sm font-medium text-cool-gray" for improved alignment and text styling of the Netlify badge element

Possibly related issues

• [DESIGN]: Footer Netlify badge alt text renders poorly and inconsistently when image fails to load #4921 — Addresses styling and spacing concerns for the Netlify badge in the Footer component, directly improving its visual presentation and alignment.

Poem

A tiny badge got a fresh new look, 🎀
With spacing and alignment by the book,
The footer now shines with style so grand,
A humble change by a helpful hand! ✨

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: styling improvements to the Netlify badge in the footer, specifically for the alt-text fallback appearance.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (7c39172) to head (641f479).
⚠️ Report is 10 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4967   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          796       796           
  Branches       146       146           
=========================================
  Hits           796       796           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	33
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4967--asyncapi-website.netlify.app/

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@SHUBHANSHU602, I'll verify the changes in this PR for you. Let me examine the code and related context.

---

🏁 Script executed:

#!/bin/bash
# Get the PR diff to see the exact changes
gh pr diff 4967 --repo asyncapi/website

# Get issue `#4921` details to understand the problem being addressed
gh issue view 4921 --repo asyncapi/website --json title,body,labels

Length of output: 2945

---

🏁 Script executed:

#!/bin/bash
# Read the Footer component to see the full context
cat components/footer/Footer.tsx

Length of output: 5758

---

@SHUBHANSHU602, I've reviewed the changes in PR #4967. Here's my analysis:

✅ What's Working Well

1. Solves the core issue: The added text styling classes (text-sm, font-medium, text-cool-gray) will style the alt text when the image fails to load, addressing the readability concern from issue #4921.

2. No breaking changes: The text classes only affect the alt-text fallback scenario, not the loaded image.

3. Lighthouse scores are good: Accessibility (98), Best Practices (92), and SEO (100) all look solid.

⚠️ Minor Observations

I noticed a few things to consider:

1. ml-3 (margin-left): This adds left spacing, but looking at the HTML structure, the image is the only element inside its parent <p> tag. This margin might create unwanted space. You may want to test if this spacing is actually needed.

2. text-sm redundancy: The parent <p> tag already has class="block text-sm leading-6", so the text-sm on the image might be redundant (though it doesn't hurt).

3. inline-block vs inline: Changing from inline to inline-block could cause subtle layout differences even when the image loads successfully. Please verify the image still aligns correctly with the surrounding text when it loads.

🧪 Testing Recommendations

To ensure everything is fine, please test:

• Normal case: Verify the Netlify badge displays correctly when the image loads
• Fallback case: Block the image URL (browser DevTools → Network tab → Block request URL) and confirm the alt text now looks better styled
• Responsive views: Check on mobile and desktop breakpoints

The implementation approach is sound for a CSS-only fix. If you've already tested these scenarios and they look good, the PR should be ready to merge! 🚀

---

🧠 Learnings used

Learnt from: akshatnema
Repo: asyncapi/website PR: 3265
File: tests/fixtures/toolsObjectData.js:51-52
Timestamp: 2024-10-09T17:35:36.557Z
Learning: When reviewing code in the 'asyncapi/website' repository, akshatnema prefers that I do not provide committable code suggestions.

[SHUBHANSHU602]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain
@SHUBHANSHU602, I'll verify the changes in this PR for you. Let me examine the code and related context.

🏁 Script executed:

#!/bin/bash
# Get the PR diff to see the exact changes
gh pr diff 4967 --repo asyncapi/website

# Get issue `#4921` details to understand the problem being addressed
gh issue view 4921 --repo asyncapi/website --json title,body,labels

Length of output: 2945

🏁 Script executed:

#!/bin/bash
# Read the Footer component to see the full context
cat components/footer/Footer.tsx

Length of output: 5758

@SHUBHANSHU602, I've reviewed the changes in PR #4967. Here's my analysis:

✅ What's Working Well

1. Solves the core issue: The added text styling classes (text-sm, font-medium, text-cool-gray) will style the alt text when the image fails to load, addressing the readability concern from issue #4921.
2. No breaking changes: The text classes only affect the alt-text fallback scenario, not the loaded image.
3. Lighthouse scores are good: Accessibility (98), Best Practices (92), and SEO (100) all look solid.

⚠️ Minor Observations

I noticed a few things to consider:

1. ml-3 (margin-left): This adds left spacing, but looking at the HTML structure, the image is the only element inside its parent <p> tag. This margin might create unwanted space. You may want to test if this spacing is actually needed.
2. text-sm redundancy: The parent <p> tag already has class="block text-sm leading-6", so the text-sm on the image might be redundant (though it doesn't hurt).
3. inline-block vs inline: Changing from inline to inline-block could cause subtle layout differences even when the image loads successfully. Please verify the image still aligns correctly with the surrounding text when it loads.

🧪 Testing Recommendations

To ensure everything is fine, please test:

• Normal case: Verify the Netlify badge displays correctly when the image loads
• Fallback case: Block the image URL (browser DevTools → Network tab → Block request URL) and confirm the alt text now looks better styled
• Responsive views: Check on mobile and desktop breakpoints

The implementation approach is sound for a CSS-only fix. If you've already tested these scenarios and they look good, the PR should be ready to merge! 🚀

🧠 Learnings used

hey @coderabbitai i have verified every thing work fine.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@SHUBHANSHU602, excellent! 🎉 Thank you for thoroughly testing the changes across all scenarios. Since you've verified that:

• ✅ The Netlify badge displays correctly when the image loads
• ✅ The alt-text fallback is properly styled when the image fails to load
• ✅ Everything works well on different viewports

The PR looks great and ready to merge! The CSS-only approach successfully addresses issue #4921 without introducing any side effects. Nice work! 🚀

---

If you found this review helpful, would you consider giving us a shout-out on X?

Thank you for using CodeRabbit!