fix: dynamically adjust dropdown width to prevent text wrapping

[DevanjoyDas]

Description

This PR addresses the issue where the dropdown menu in the navigation bar had a fixed width, causing text wrapping for longer items and excessive space for shorter items. The dropdown width now adjusts dynamically based on the length of the longest link, ensuring a more consistent and responsive UI.

Screenshot

Fixes #503

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide 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.

[netlify]

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c8bb3a0
🔍 Latest deploy log	https://app.netlify.com/sites/peaceful-ramanujan-288045/deploys/677693ddca061e0008718346
😎 Deploy Preview	https://deploy-preview-504--peaceful-ramanujan-288045.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 site configuration.

[ashmit-coder]

LGTM! the workflow seems to be failing due to the year changing from 2024 to 2025.

[ashmit-coder]

hey @thulieblack should we change the year on the main page to 2025 or merge the pr's if only this test is failing?

[DevanjoyDas]

LGTM! the workflow seems to be failing due to the year changing from 2024 to 2025.

Yes @ashmit-coder , The error is occurring because the test "Contains correct heading" for the landing page heading is expecting the text:
AsyncAPI Conf On Tour 2025

I have created PR #506 implementing the second solution.

Root Cause of the Error:

In the file https://github.com/asyncapi/conference-website/blob/master/cypress/e2e/Landing.cy.js

const Year = new Date().getFullYear();
cy.getTestData("landing-heading").contains(`AsyncAPI Conf On Tour ${Year}`);

Possible Solutions

1. Short term solution only for this Year 2025
   We can change the Heading Directly to 2025 in the file https://github.com/asyncapi/conference-website/blob/master/components/Header/header.js

Current Code

<Heading className='text-6xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient' level='h1' typeStyle='heading'>
			AsyncAPI Conf On Tour 2024
</Heading>

Proposed New Code

<Heading className='text-6xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient' level='h1' typeStyle='heading'>
			AsyncAPI Conf On Tour 2025
</Heading>

2. Another Short term solution for this year 2025
   We can temporarily modify the code until the official dates for the 2025 Conferences are announced
   In file https://github.com/asyncapi/conference-website/blob/master/cypress/e2e/Landing.cy.js

Current Code

const Year = new Date().getFullYear();
    cy.getTestData("landing-heading").contains(`AsyncAPI Conf On Tour ${Year}`);

Proposed New Code

const Year = new Date().getFullYear();
cy.getTestData("landing-heading").contains(new RegExp(`AsyncAPI Conf On Tour (${Year}|${Year-1})`));

3. Long term solution for every upcoming Year
   If the heading is supposed to change dynamically each year, we can update the logic in the application to reflect the current year

[AceTheCreator]

cc @ashmit-coder, your review here would be appreciated 🙏🏽

[AceTheCreator]

@DevanjoyDas, can you resolve the conflict in your code?

[AceTheCreator]

Closing this PR due to inactivity