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)*
fix(frontend): keep mobile batch toolbar right-aligned
2026-09-28 07:36:38 +08:00 · 2026-02-23 22:55:49 +08:00 · 2026-02-23 22:53:48 +08:00 · 2026-02-23 22:26:11 +08:00 · 2026-02-23 22:24:28 +08:00 · 2026-02-23 22:03:29 +08:00
3 changed files with 335 additions and 329 deletions
@@ -1722,205 +1722,207 @@ export default function ForwardPage() {
            onOpen={() => setIsSearchVisible(true)}
          />
        </div>
-        <div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0 sm:gap-3">
-          {selectMode ? (
-            <>
-              <span className="text-sm text-default-600 shrink-0">
-                已选择 {selectedIds.size} 项
-              </span>
-              <Button
-                color="primary"
-                size="sm"
-                variant="flat"
-                onPress={selectAll}
-              >
-                全选
-              </Button>
-              <Button
-                color="secondary"
-                size="sm"
-                variant="flat"
-                onPress={deselectAll}
-              >
-                清空
-              </Button>
-              <Button
-                color="danger"
-                isDisabled={selectedIds.size === 0}
-                size="sm"
-                variant="flat"
-                onPress={() => setBatchDeleteModalOpen(true)}
-              >
-                删除
-              </Button>
-              <Button
-                color="warning"
-                isDisabled={selectedIds.size === 0}
-                isLoading={batchLoading}
-                size="sm"
-                variant="flat"
-                onPress={() => handleBatchToggleService(false)}
-              >
-                停用
-              </Button>
-              <Button
-                color="success"
-                isDisabled={selectedIds.size === 0}
-                isLoading={batchLoading}
-                size="sm"
-                variant="flat"
-                onPress={() => handleBatchToggleService(true)}
-              >
-                启用
-              </Button>
-              <Button
-                color="primary"
-                isDisabled={selectedIds.size === 0}
-                isLoading={batchLoading}
-                size="sm"
-                variant="flat"
-                onPress={handleBatchRedeploy}
-              >
-                下发
-              </Button>
-              <Button
-                color="secondary"
-                isDisabled={selectedIds.size === 0}
-                size="sm"
-                variant="flat"
-                onPress={() => setBatchChangeTunnelModalOpen(true)}
-              >
-                隧道
-              </Button>
-              <Button
-                color="secondary"
-                size="sm"
-                variant="solid"
-                onPress={toggleSelectMode}
-              >
-                退出
-              </Button>
-            </>
-          ) : (
-            <>
-              {/* 筛选按钮 */}
-              <Button
-                isIconOnly
-                aria-label="筛选条件"
-                className={
-                  filterUserId !== "all" || filterTunnelId !== "all"
-                    ? "bg-primary/20 text-primary relative"
-                    : "text-default-600 relative"
-                }
-                color={
-                  filterUserId !== "all" || filterTunnelId !== "all"
-                    ? "primary"
-                    : "default"
-                }
-                size="sm"
-                title="筛选条件"
-                variant="flat"
-                onPress={() => setIsFilterModalOpen(true)}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
+        <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 ? (
+              <>
+                <span className="text-sm text-default-600 shrink-0">
+                  已选择 {selectedIds.size} 项
+                </span>
+                <Button
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                  onPress={selectAll}
+                >
+                  全选
+                </Button>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  variant="flat"
+                  onPress={deselectAll}
+                >
+                  清空
+                </Button>
+                <Button
+                  color="danger"
+                  isDisabled={selectedIds.size === 0}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => setBatchDeleteModalOpen(true)}
+                >
+                  删除
+                </Button>
+                <Button
+                  color="warning"
+                  isDisabled={selectedIds.size === 0}
+                  isLoading={batchLoading}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => handleBatchToggleService(false)}
+                >
+                  停用
+                </Button>
+                <Button
+                  color="success"
+                  isDisabled={selectedIds.size === 0}
+                  isLoading={batchLoading}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => handleBatchToggleService(true)}
+                >
+                  启用
+                </Button>
+                <Button
+                  color="primary"
+                  isDisabled={selectedIds.size === 0}
+                  isLoading={batchLoading}
+                  size="sm"
+                  variant="flat"
+                  onPress={handleBatchRedeploy}
+                >
+                  下发
+                </Button>
+                <Button
+                  color="secondary"
+                  isDisabled={selectedIds.size === 0}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => setBatchChangeTunnelModalOpen(true)}
+                >
+                  隧道
+                </Button>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  variant="solid"
+                  onPress={toggleSelectMode}
+                >
+                  退出
+                </Button>
+              </>
+            ) : (
+              <>
+                {/* 筛选按钮 */}
+                <Button
+                  isIconOnly
+                  aria-label="筛选条件"
+                  className={
+                    filterUserId !== "all" || filterTunnelId !== "all"
+                      ? "bg-primary/20 text-primary relative"
+                      : "text-default-600 relative"
+                  }
+                  color={
+                    filterUserId !== "all" || filterTunnelId !== "all"
+                      ? "primary"
+                      : "default"
+                  }
+                  size="sm"
+                  title="筛选条件"
+                  variant="flat"
+                  onPress={() => setIsFilterModalOpen(true)}
                >
-                  <path
-                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                  />
-                </svg>
-                {(filterUserId !== "all" || filterTunnelId !== "all") && (
-                  <span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
-                )}
-              </Button>
-              {/* 显示模式切换按钮 */}
-              <Button
-                isIconOnly
-                aria-label={
-                  viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
-                }
-                className="text-sm"
-                color="default"
-                size="sm"
-                title={
-                  viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
-                }
-                variant="flat"
-                onPress={handleViewModeChange}
-              >
-                {viewMode === "grouped" ? (
                  <svg
                    aria-hidden="true"
                    className="w-4 h-4"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
                  >
                    <path
-                      clipRule="evenodd"
-                      d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
-                      fillRule="evenodd"
+                      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
                    />
                  </svg>
-                ) : (
-                  <svg
-                    aria-hidden="true"
-                    className="w-4 h-4"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
-                  </svg>
-                )}
-              </Button>
+                  {(filterUserId !== "all" || filterTunnelId !== "all") && (
+                    <span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
+                  )}
+                </Button>
+                {/* 显示模式切换按钮 */}
+                <Button
+                  isIconOnly
+                  aria-label={
+                    viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
+                  }
+                  className="text-sm"
+                  color="default"
+                  size="sm"
+                  title={
+                    viewMode === "grouped" ? "切换到直接显示" : "切换到分类显示"
+                  }
+                  variant="flat"
+                  onPress={handleViewModeChange}
+                >
+                  {viewMode === "grouped" ? (
+                    <svg
+                      aria-hidden="true"
+                      className="w-4 h-4"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        clipRule="evenodd"
+                        d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
+                        fillRule="evenodd"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      aria-hidden="true"
+                      className="w-4 h-4"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+                    </svg>
+                  )}
+                </Button>

-              {/* 导入按钮 */}
-              <Button
-                color="warning"
-                size="sm"
-                variant="flat"
-                onPress={handleImport}
-              >
-                导入
-              </Button>
+                {/* 导入按钮 */}
+                <Button
+                  color="warning"
+                  size="sm"
+                  variant="flat"
+                  onPress={handleImport}
+                >
+                  导入
+                </Button>

-              {/* 导出按钮 */}
-              <Button
-                color="success"
-                isLoading={exportLoading}
-                size="sm"
-                variant="flat"
-                onPress={handleExport}
-              >
-                导出
-              </Button>
+                {/* 导出按钮 */}
+                <Button
+                  color="success"
+                  isLoading={exportLoading}
+                  size="sm"
+                  variant="flat"
+                  onPress={handleExport}
+                >
+                  导出
+                </Button>

-              <Button
-                className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
-                color="default"
-                size="sm"
-                variant="flat"
-                onPress={toggleSelectMode}
-              >
-                批量
-              </Button>
+                <Button
+                  className="bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
+                  color="default"
+                  size="sm"
+                  variant="flat"
+                  onPress={toggleSelectMode}
+                >
+                  批量
+                </Button>

-              <Button
-                color="primary"
-                size="sm"
-                variant="flat"
-                onPress={handleAdd}
-              >
-                新增
-              </Button>
-            </>
-          )}
+                <Button
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                  onPress={handleAdd}
+                >
+                  新增
+                </Button>
+              </>
+            )}
+          </div>
        </div>
      </div>

@@ -1075,77 +1075,79 @@ export default function NodePage() {
          />
        </div>

-        <div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0">
-          {selectMode ? (
-            <>
-              <span className="text-sm text-default-600 shrink-0">
-                已选 {selectedIds.size} 项
-              </span>
-              <Button
-                color="primary"
-                size="sm"
-                variant="flat"
-                onPress={selectAll}
-              >
-                全选
-              </Button>
-              <Button
-                color="secondary"
-                size="sm"
-                variant="flat"
-                onPress={deselectAll}
-              >
-                清空
-              </Button>
-              <Button
-                color="warning"
-                isDisabled={selectedIds.size === 0}
-                isLoading={batchUpgradeLoading}
-                size="sm"
-                variant="flat"
-                onPress={() => openUpgradeModal("batch")}
-              >
-                升级
-              </Button>
-              <Button
-                color="danger"
-                isDisabled={selectedIds.size === 0}
-                size="sm"
-                variant="flat"
-                onPress={() => setBatchDeleteModalOpen(true)}
-              >
-                删除
-              </Button>
-              <Button
-                color="secondary"
-                size="sm"
-                variant="solid"
-                onPress={toggleSelectMode}
-              >
-                退出
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
-                color="default"
-                size="sm"
-                variant="flat"
-                onPress={toggleSelectMode}
-              >
-                批量
-              </Button>
-              <Button
-                color="primary"
-                size="sm"
-                variant="flat"
-                onPress={handleAdd}
-              >
-                新增
-              </Button>
-            </>
-          )}
+        <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 ? (
+              <>
+                <span className="text-sm text-default-600 shrink-0">
+                  已选 {selectedIds.size} 项
+                </span>
+                <Button
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                  onPress={selectAll}
+                >
+                  全选
+                </Button>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  variant="flat"
+                  onPress={deselectAll}
+                >
+                  清空
+                </Button>
+                <Button
+                  color="warning"
+                  isDisabled={selectedIds.size === 0}
+                  isLoading={batchUpgradeLoading}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => openUpgradeModal("batch")}
+                >
+                  升级
+                </Button>
+                <Button
+                  color="danger"
+                  isDisabled={selectedIds.size === 0}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => setBatchDeleteModalOpen(true)}
+                >
+                  删除
+                </Button>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  variant="solid"
+                  onPress={toggleSelectMode}
+                >
+                  退出
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  className="bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
+                  color="default"
+                  size="sm"
+                  variant="flat"
+                  onPress={toggleSelectMode}
+                >
+                  批量
+                </Button>
+                <Button
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                  onPress={handleAdd}
+                >
+                  新增
+                </Button>
+              </>
+            )}
+          </div>
        </div>
      </div>

@@ -710,77 +710,79 @@ export default function TunnelPage() {
          />
        </div>

-        <div className="flex min-h-9 min-w-0 max-w-full items-center justify-end gap-2 overflow-x-auto whitespace-nowrap [&>*]:shrink-0">
-          {selectMode ? (
-            <>
-              <span className="text-sm text-default-600 shrink-0">
-                已选择 {selectedIds.size} 项
-              </span>
-              <Button
-                color="primary"
-                size="sm"
-                variant="flat"
-                onPress={selectAll}
-              >
-                全选
-              </Button>
-              <Button
-                color="secondary"
-                size="sm"
-                variant="flat"
-                onPress={deselectAll}
-              >
-                清空
-              </Button>
-              <Button
-                color="danger"
-                isDisabled={selectedIds.size === 0}
-                size="sm"
-                variant="flat"
-                onPress={() => setBatchDeleteModalOpen(true)}
-              >
-                删除
-              </Button>
-              <Button
-                color="primary"
-                isDisabled={selectedIds.size === 0}
-                isLoading={batchLoading}
-                size="sm"
-                variant="flat"
-                onPress={handleBatchRedeploy}
-              >
-                下发
-              </Button>
-              <Button
-                color="secondary"
-                size="sm"
-                variant="solid"
-                onPress={toggleSelectMode}
-              >
-                退出
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                className="border border-sky-200 bg-sky-100 text-sky-700 hover:bg-sky-200 dark:border-sky-500/40 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
-                color="default"
-                size="sm"
-                variant="flat"
-                onPress={toggleSelectMode}
-              >
-                批量
-              </Button>
-              <Button
-                color="primary"
-                size="sm"
-                variant="flat"
-                onPress={handleAdd}
-              >
-                新增
-              </Button>
-            </>
-          )}
+        <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 ? (
+              <>
+                <span className="text-sm text-default-600 shrink-0">
+                  已选择 {selectedIds.size} 项
+                </span>
+                <Button
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                  onPress={selectAll}
+                >
+                  全选
+                </Button>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  variant="flat"
+                  onPress={deselectAll}
+                >
+                  清空
+                </Button>
+                <Button
+                  color="danger"
+                  isDisabled={selectedIds.size === 0}
+                  size="sm"
+                  variant="flat"
+                  onPress={() => setBatchDeleteModalOpen(true)}
+                >
+                  删除
+                </Button>
+                <Button
+                  color="primary"
+                  isDisabled={selectedIds.size === 0}
+                  isLoading={batchLoading}
+                  size="sm"
+                  variant="flat"
+                  onPress={handleBatchRedeploy}
+                >
+                  下发
+                </Button>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  variant="solid"
+                  onPress={toggleSelectMode}
+                >
+                  退出
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  className="bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/45"
+                  color="default"
+                  size="sm"
+                  variant="flat"
+                  onPress={toggleSelectMode}
+                >
+                  批量
+                </Button>
+                <Button
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                  onPress={handleAdd}
+                >
+                  新增
+                </Button>
+              </>
+            )}
+          </div>
        </div>
      </div>
Author	SHA1	Message	Date
sagit	ee6bc8c50e	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)	2026-02-23 22:55:49 +08:00
sagitchu	c94ab84ab9	fix(frontend): keep mobile batch toolbar right-aligned Use an overflow wrapper with an inner min-w-full flex row so controls stay visually right-aligned when space is sufficient, while Android can still horizontally swipe when the toolbar overflows.	2026-02-23 22:53:48 +08:00
sagit	84a03215f4	fix(frontend): restore Android swipe for mobile batch toolbar (#202 ) ## Summary - fix mobile batch action toolbar in forward/node/tunnel pages to keep horizontal overflow reachable on Android - switch toolbar alignment to start on mobile and keep right alignment on `sm+` to avoid `justify-end` overflow reachability issues - add `touch-pan-x` to improve horizontal swipe handling on mobile browsers while preserving existing desktop layout ## Verification - `npm run build` (fails due to pre-existing issue: `src/main.tsx` cannot find module `virtual:pwa-register`) - `npm run lint` (fails due to pre-existing a11y errors in unrelated files and in existing forward labels)	2026-02-23 22:26:11 +08:00
sagitchu	def93749eb	fix(frontend): restore Android swipe for mobile batch toolbar Switch mobile batch toolbar alignment to start and enable horizontal pan gestures so overflow actions remain reachable on Android while desktop right alignment stays unchanged.	2026-02-23 22:24:28 +08:00
sagit	945a1c0dfc	fix(frontend): remove border from batch toggle button (#199 )	2026-02-23 22:03:29 +08:00