Pārlūkot izejas kodu

fix: improve table responsiveness on small screens

- Add horizontal scroll for table content
- Fix '仓位来源' and '操作' columns to right side
- Optimize button layout for mobile screens
- Add text truncation for address display
lushdog@outlook.com 1 mēnesi atpakaļ
vecāks
revīzija
14670dc692
1 mainītis faili ar 11 papildinājumiem un 5 dzēšanām
  1. 11 5
      src/app/my-lp/page.tsx

+ 11 - 5
src/app/my-lp/page.tsx

@@ -587,8 +587,9 @@ function MyLPPageContent() {
 		{
 			title: '仓位来源',
 			dataIndex: 'bonusInfo',
-			width: 180,
-			key: 'bonusInfo',
+			width: 120,
+			fixed: 'right',
+			key: 'bonusInfoSource',
 			render: (text: string, record: RecordInfo) => (
 				<span className="font-mono text-sm">
 					{record?.bonusInfo?.fromCreatorPosition ? (
@@ -612,7 +613,8 @@ function MyLPPageContent() {
 			title: '操作',
 			dataIndex: 'bonusInfo',
 			width: 120,
-			key: 'bonusInfo',
+			fixed: 'right',
+			key: 'bonusInfoAction',
 			render: (text: string, record: RecordInfo) => (
 				<div className="flex items-center gap-3">
 					<Tooltip title="去关仓">
@@ -817,7 +819,7 @@ function MyLPPageContent() {
 		<main style={{ padding: '24px' }}>
 			<div className="mb-4">
 				{userAddress ? (
-					<div className="flex items-center gap-2 mb-4">
+					<div className="flex flex-wrap items-center gap-2 mb-4">
 						<Select
 							value={tokenAddress}
 							placeholder="选择 LP Token"
@@ -838,7 +840,9 @@ function MyLPPageContent() {
 								onMintChange(value)
 							}}
 						/>
-						<p className="text-lg font-bold">你的地址: {userAddress}</p>
+						<p className="text-lg font-bold truncate max-w-xs sm:max-w-md">
+							你的地址: {userAddress}
+						</p>
 						<Button type="primary" onClick={handleAddressChange}>
 							更换地址
 						</Button>
@@ -905,6 +909,8 @@ function MyLPPageContent() {
 								pageSize: pagination.pageSize || 50,
 							})
 						}}
+						scroll={{ x: 'max-content' }}
+						style={{ overflowX: 'auto' }}
 					/>
 				</Spin>
 			)}