Expand clickable area for buttons to encompass entire button container instead of just text

[Nithwin]

Describe the nature & the intricate details of the enhancement of your suggestions.

Summary

Currently on the website, buttons only trigger navigation or actions when clicking directly on the inner text. Clicking within the button's boundaries (e.g., in the padding or surrounding empty area inside the button border) does not trigger the event.

Intricate Details & Current Behavior

• Expected Behavior: Clicking anywhere within the visible button bounding box (including padding and borders) should trigger the link / onClick handler.
• Current Behavior: The click target is restricted to the text itself. Clicks on the outer padding area are swallowed or ignored, resulting in poor accessibility and a degraded UX.

Likely Root Cause

This typically happens when:

1. An <a> tag is nested inside a styled <button> / <div> container without display: block / width: 100%; height: 100%, or
2. Padding is applied to the outer wrapper rather than the clickable interactive element, or
3. Child text elements lack pointer-events: none or the parent element isn't capturing the click delegation.

Proposed Solution

• Ensure the interactive anchor (<a>) or <button> spans the entire width and height of the visual button (display: inline-flex / display: block; width: 100%; height: 100%).
• Move padding and hit-area styling directly onto the interactive element to ensure the full area is clickable across desktop and mobile touch targets.

Are you willing to take the initiative to implement & contribute a PR of the said feature/enhancement?

Yes

Will this enhancement require a significant code refactor or an increase in the total numer of lines of code in the source code?

Yes

Code of Conduct

• I agree to follow the community's Code of Conduct