mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-09 11:16:37 +08:00
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:
@@ -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" ? (
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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 ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user