[ECO Bounty] ioTex Hub Text Overflow/Clipping on "Thought Leadership" Tag

Description

In the "New Updates" section of the IoTeX Hub, the category tag labeled "Thought Leadership" is experiencing a layout failure. The text is vertically overflowing or incorrectly aligned within its container, causing the word "Leadership" to be cut off and bleed outside the bottom border of the tag button.

Steps to Reproduce

1. Open a mobile browser and navigate to hub.iotex.io.

2. Locate the "New Updates" section on the homepage.

3. Find an article card that contains the "Thought Leadership" tag (e.g., the SEC's DePIN No-Action Letter article).

4. Observe the text alignment within the gold/orange tag.

Observed Result

The text "Thought Leadership" is not vertically centered. The second word, "Leadership," specifically its descenders and the bottom half of the letters, is clipped and extends beyond the container's bottom edge.

Expected Result

The text should be perfectly centered vertically within the tag container, or the container height should dynamically adjust to accommodate the two lines of text without clipping.

Technical Observations

• Container Constraint: The tag appears to have a fixed height that is too small for the font size/line-height combination being used.

• Font Scaling: On mobile devices, system font scaling or browser zoom may be exacerbating the overflow.

• Potential Flexbox Issue: The container may lack align-items: center or proper padding to handle multi-line text if the word wraps.

Suggested Fix

1. Increase the min-height or vertical padding of the tag class.

2. Ensure overflow: visible is not masking a deeper padding issue, or preferably, set a flexible height with display: flex and align-items: center.

3. Check if a line-height reduction is appropriate for multi-line tags on mobile viewports.

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Android 13

-Device model: Redmi Note 10 Pro