[BUG] Content inside Button not alligned correctly

catosaurusrex2003 commented 2 months ago

Describe the bug.

Upon close inspection of the "Become a sponsor now" button on the website (as shown in the attached image) It is evident that the text is not perfectly aligned within the button. Although this is a subtle detail, it noticeably detracts from the visual polish and overall user experience.

This is happening because the button component is not able to handle longer

I think the impact of this is high as a potential sponsor is going to interact with this button.

Expected behavior

After changes in the button.js

Screenshots

Added above

How to Reproduce

noticable on https://conference.asyncapi.com/

🥦 Browser

Other This is happening in FIrefox only as of now, But it will eventually break in all browsers when the text size increases inside the button.

👀 Have you checked for similar open issues?

[X] I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

[X] I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

github-actions[bot] commented 2 months ago

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

TenzDelek commented 2 months ago

@catosaurusrex2003 in which screen size cause i dont see it in my machine.

catosaurusrex2003 commented 2 months ago

1920 x 1080 (16:9) Firefox

This issue happens in firefox only for this button exactly. This specific buttons is fine in chrome.

But when you increase the text in any button then it maligns in both chrome and firefox.

also the reason why the behaviour is different in diff browsers is due to different fonts used. Upon deep inspection i found

👆 this font is used in firefox

and

👆 this font is used in chrome

i dont know if this is intentional tho.

catosaurusrex2003 commented 2 months ago

ohk i figured out why the fonts were not working correctly as expected

the google fonts were not correctly imported in the global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Work+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&display=swap');

Before 👆 : this didnt import the google fonts correctly

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400&family=Work+Sans:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

After 👆 : this imports the google fonts correctly and all the fonts have been put in one import statement.

This solves the immediate issue of the button misalgning in firefox for now. but it will misallign again if the length of text is increased inside the button.

asyncapi / conference-website