Fix/Mobile-UI-Fix-WalletConnectButton

[vignesha22]

Description

• Fixed the walletConnect button width to fit-width and changed the dropdown to a fixed width

How Has This Been Tested?

• tested locally

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Summary by CodeRabbit

• Style
  • Adjusted WalletConnect dropdown width and button sizing for improved visual alignment and consistency.

[coderabbitai]

Walkthrough

The WalletConnectDropdown component receives Tailwind CSS styling adjustments to its sizing behavior. The closed-state wrapper width changes to flexible sizing, the toggle button gets a fixed height, and the open panel width becomes fixed at 254px while maintaining its adaptive height.

Changes

Cohort / File(s)	Summary
Wallet Dropdown Styling src/apps/pillarx-app/components/WalletConnectDropdown/WalletConnectDropdown.tsx	Toggle button height set to fixed 44px; dropdown wrapper width changed to flexible sizing when closed; open panel width constrained to fixed 254px

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Single file affected with isolated styling changes
• Straightforward Tailwind CSS class modifications
• No logic or behavioral changes
• Changes follow consistent sizing pattern

Suggested reviewers

• IAmKio
• RanaBug

Poem

🐰 A dropdown that fits just right,
With heights now fixed and widths held tight,
Two-fifty-four pixels of UI grace,
The wallet button finds its place! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title references a mobile UI fix for the WalletConnect button, which aligns with the changeset that modifies WalletConnect dropdown sizing for responsive behavior.
Description check	✅ Passed	The description includes all required template sections: a summary of changes, testing details, a screenshot, and the change type selection. While testing details are minimal, all required sections are present and filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/mobile-ui-fix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying x with    Cloudflare Pages

Latest commit:	634559b
Status:	✅  Deploy successful!
Preview URL:	https://c64731d0.x-e62.pages.dev
Branch Preview URL:	https://fix-mobile-ui-fix.x-e62.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/apps/pillarx-app/components/WalletConnectDropdown/WalletConnectDropdown.tsx (1)

366-366: Remove redundant padding declarations.

The class list contains both py-[9px] px-3 and p-4. Since p-4 appears later in the list, it overrides the earlier padding values, making py-[9px] px-3 redundant.

Apply this diff to remove the redundant padding:

-        <div className="flex flex-col py-[9px] px-3 w-[254px] h-fit border-x-2 border-t-2 border-b-4 rounded-[10px] border-[#121116] gap-4 absolute left-0 p-4 bg-container_grey z-10">
+        <div className="flex flex-col w-[254px] h-fit border-x-2 border-t-2 border-b-4 rounded-[10px] border-[#121116] gap-4 absolute left-0 p-4 bg-container_grey z-10">

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3ededb3 and 634559b.

📒 Files selected for processing (1)

• src/apps/pillarx-app/components/WalletConnectDropdown/WalletConnectDropdown.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: lint
• GitHub Check: unit-tests

🔇 Additional comments (3)

src/apps/pillarx-app/components/WalletConnectDropdown/WalletConnectDropdown.tsx (3)

337-341: Verify the height mismatch is intentional.

The wrapper has h-12 (48px) while the inner button has h-[44px] (44px), creating a 4px height difference. If this vertical spacing is intentional for visual alignment, consider adding a brief comment. Otherwise, these values should match.

---

366-366: Verify fixed dropdown width works on small mobile screens.

The dropdown now uses a fixed width of w-[254px]. On very small mobile viewports (< 254px), this could cause horizontal overflow or clipping. Since this is marked as a mobile UI fix, please confirm that the 254px fixed width has been tested on the smallest target screen sizes.

---

337-366: Solid approach to the button sizing refactor.

The changes successfully implement the PR objective: the button wrapper and trigger now use w-fit for dynamic width based on content, while the dropdown panel uses a fixed w-[254px] width. This approach provides visual consistency for the dropdown while allowing the button to adapt to its content.