asyncapi / conference-website

Website for the AsyncAPI online conference
https://conference.asyncapi.com
23 stars 94 forks source link

[BUG] Content inside Button not alligned correctly #389

Closed catosaurusrex2003 closed 2 weeks ago

catosaurusrex2003 commented 1 month ago

Describe the bug.

Upon close inspection of the "Become a sponsor now" button on the website (as shown in the attached image) 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 image

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?

🏒 Have you read the Contributing Guidelines?

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

github-actions[bot] commented 1 month 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 1 month ago

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

image
catosaurusrex2003 commented 1 month 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

image πŸ‘† this font is used in firefox

and

image πŸ‘† this font is used in chrome

i dont know if this is intentional tho.

catosaurusrex2003 commented 1 month 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.