[ECO Bounty] ioTex Hub UI Overflow / Element Truncation on Mobile

Severity: Medium (Affects readability of transaction details)

Component: Swap Interface / Exchange UI

Description

The swap interface does not properly scale for mobile viewports. Specifically, the "Route" and "Protocol" information at the bottom of the swap card is partially cut off, and the spacing between the "You pay/receive" sections and the transaction details is insufficient, leading to a cramped and unprofessional layout.

Steps to Reproduce

1. Open the swap dApp on a mobile device (or mobile browser emulator).

2. Input a token pair (e.g., ZOOM to IOTX).

3. Enter a value (e.g., 1000).

4. Observe the bottom section of the swap card where the "Route" and "Protocol" details are displayed.

Expected Result

The container should be responsive. The route path should wrap to a new line or become scrollable, and the "Connect Wallet" button should have clear padding from the information above it.

Actual Result

• The swap route path is truncated/cut off at the edge of the screen.

• The "Protocol" text and "Mimo V2" label are misaligned or overlapping.

• The "Connect Wallet" button is pushed very close to the data table, making the UI feel cluttered.

Suggested Fix

• Implement a Flex-wrap or Horizontal Scroll for the "Route" section.

• Increase the padding-bottom on the details container.

• Ensure the "Connect Wallet" button has a fixed margin from the info panel above it to prevent overlap.

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Android 13

-Device model: Redmi Note 10 Pro