fix: sprint2 ui issues

[BillySh1]

Description

Closes #MF-27 #MF-269

Type of change

• Documentation
• Code refactoring (Restructuring existing code w/o changing its observable behavior)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (a fix or feature that would make something no longer possible to do/require old user must upgrade their Mask Network to this new version)

Previews

Checklist

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
  • I have removed all in development console.logs
  • I have removed all commented code.
• I have commented on my code, particularly in hard-to-understand areas.
• I have read Internationalization Guide and moved text fields to the i18n JSON file.

If this PR depends on external APIs:

• I have configured those APIs with CORS headers to let extension requests get passed.
  • chrome extension: chrome-extension://[id]
  • firefox extension: moz-extension://[id]
• I have delegated all web requests to the background service via the internal RPC bridge.

[github-actions]

🚀 Deployed on https://6255baaeac8532008b8dbc9d--compassionate-northcutt-326a3a.netlify.app

[UncleBill]

I had the same problem when developed the tip feature.

I think no need to catch the container via usePortalShadowRoot and do prop drilling.

instead of

Maskbook/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx

Lines 247 to 255 in e46d955

	children: usePortalShadowRoot((container) => (
	<RedPacketCreateNew
	origin={settings}
	onNext={onNext}
	state={tokenState}
	onClose={onClose}
	onChange={onChange}
	SelectMenuProps={{ container }}
	/>

suggest

Maskbook/packages/mask/src/plugins/NextID/components/Tip/TipForm.tsx

Lines 128 to 146 in e46d955

	<Select
	className={classes.address}
	ref={selectRef}
	value={recipient}
	disabled={isSending}
	onChange={(e) => {
	setRecipient(e.target.value)
	}}
	MenuProps={{
	anchorOrigin: {
	vertical: 'bottom',
	horizontal: 'center',
	},
	container: selectRef.current,
	anchorEl: selectRef.current,
	BackdropProps: {
	invisible: true,
	},
	}}>