fix(frontend): keep mobile batch toolbar right-aligned (#203)

## Summary
- keep mobile batch action bars visually right-aligned while preserving
Android horizontal swipe behavior
- move overflow handling to an outer scroller and keep action layout in
an inner `min-w-full` flex row
- apply the same structure across forward, node, and tunnel pages for
consistent behavior

## Verification
- `npm run build` *(fails due to pre-existing issue: `src/main.tsx`
cannot find module `virtual:pwa-register`)*
- `npm run lint -- src/pages/forward.tsx src/pages/node.tsx
src/pages/tunnel.tsx` *(fails due to pre-existing a11y labels in
`forward.tsx` lines 3202/3223)*
This commit is contained in:
sagit
2026-02-23 22:55:49 +08:00
committed by GitHub
3 changed files with 335 additions and 329 deletions
+3 -1
View File
@@ -1722,7 +1722,8 @@ export default function ForwardPage() {
onOpen={() => setIsSearchVisible(true)} onOpen={() => setIsSearchVisible(true)}
/> />
</div> </div>
<div className="flex min-h-9 min-w-0 max-w-full items-center justify-start gap-2 overflow-x-auto whitespace-nowrap touch-pan-x sm:justify-end sm:gap-3 [&>*]:shrink-0"> <div className="min-h-9 min-w-0 max-w-full overflow-x-auto touch-pan-x">
<div className="flex min-h-9 w-max min-w-full items-center justify-end gap-2 whitespace-nowrap sm:gap-3 [&>*]:shrink-0">
{selectMode ? ( {selectMode ? (
<> <>
<span className="text-sm text-default-600 shrink-0"> <span className="text-sm text-default-600 shrink-0">
@@ -1923,6 +1924,7 @@ export default function ForwardPage() {
)} )}
</div> </div>
</div> </div>
</div>
{/* 根据显示模式渲染不同内容 */} {/* 根据显示模式渲染不同内容 */}
{viewMode === "grouped" ? ( {viewMode === "grouped" ? (
+3 -1
View File
@@ -1075,7 +1075,8 @@ export default function NodePage() {
/> />
</div> </div>
<div className="flex min-h-9 min-w-0 max-w-full items-center justify-start gap-2 overflow-x-auto whitespace-nowrap touch-pan-x sm:justify-end [&>*]:shrink-0"> <div className="min-h-9 min-w-0 max-w-full overflow-x-auto touch-pan-x">
<div className="flex min-h-9 w-max min-w-full items-center justify-end gap-2 whitespace-nowrap [&>*]:shrink-0">
{selectMode ? ( {selectMode ? (
<> <>
<span className="text-sm text-default-600 shrink-0"> <span className="text-sm text-default-600 shrink-0">
@@ -1148,6 +1149,7 @@ export default function NodePage() {
)} )}
</div> </div>
</div> </div>
</div>
{!wsConnected && ( {!wsConnected && (
<Alert <Alert
+3 -1
View File
@@ -710,7 +710,8 @@ export default function TunnelPage() {
/> />
</div> </div>
<div className="flex min-h-9 min-w-0 max-w-full items-center justify-start gap-2 overflow-x-auto whitespace-nowrap touch-pan-x sm:justify-end [&>*]:shrink-0"> <div className="min-h-9 min-w-0 max-w-full overflow-x-auto touch-pan-x">
<div className="flex min-h-9 w-max min-w-full items-center justify-end gap-2 whitespace-nowrap [&>*]:shrink-0">
{selectMode ? ( {selectMode ? (
<> <>
<span className="text-sm text-default-600 shrink-0"> <span className="text-sm text-default-600 shrink-0">
@@ -783,6 +784,7 @@ export default function TunnelPage() {
)} )}
</div> </div>
</div> </div>
</div>
{/* 隧道卡片网格 */} {/* 隧道卡片网格 */}
{tunnels.length > 0 ? ( {tunnels.length > 0 ? (