fix: dark mode selected row background and batch toolbar layout

- Override Ant Design default selected row background in dark mode with theme color
- Restructure batch action toolbar with nested flex containers for better spacing and wrapping
- Bump version to v1.7.3.2

.gitignore

@@ -49,6 +49,8 @@ docker-compose.override.yml
 
 # Ignore AI agent instructions
 AGENTS.md
+.codex
+.github/copilot-instructions.md
 
 # Ignore backup files
 *.bak

config/version

@@ -1 +1 @@
-v1.7.3.1
+v1.7.3.2

docs/Tasktracking/2026-04-26-batch-select-dark-mode-layout.md

@@ -0,0 +1,34 @@
+# Task Record
+
+Date: 2026-04-26
+Related Module: web (CSS + HTML template)
+Change Type: Fix
+
+## Background
+The multi-select feature (added in `2026-04-26-batch-edit-clients.md`) had two visual issues:
+1. In dark mode, selected table rows showed the Ant Design default light background (`#e6f7ff`), making text unreadable against the dark theme.
+2. The batch operation toolbar was too crowded with all 7 elements (selected count + 6 buttons) packed in one row without wrapping.
+
+## Changes
+1. **CSS** (`web/assets/css/custom.min.css`): Added dark mode override `.dark .ant-table-row-selected>td{background-color:rgba(0,135,113,.15)!important}` using the primary theme color at low opacity for selected rows in dark mode. Also applied to the public fingerprinted copy.
+2. **HTML** (`web/html/inbounds.html`:587-600): Restructured the batch toolbar layout:
+   - Changed to a two-group flexbox with `justify-content: space-between`
+   - Left group: selected count (`<strong>`) + action buttons (Batch Edit, Enable, Disabled, Reset Traffic, Delete) with `flexWrap: wrap`
+   - Right group: Deselect All button
+   - Added `flexWrap: wrap` on both containers for responsive wrapping
+   - Reduced gap from 8px to 6px
+
+## Impact
+- CSS: Only affects dark mode table row selection styling; no impact on light mode
+- HTML: Batch toolbar DIV now uses nested flex containers; functionality unchanged
+- No API/DB/config changes
+- Public assets regenerated via `go run ./cmd/genassets`
+
+## Verification
+- `go run ./cmd/genassets` — regenerated public assets successfully
+- `CGO_ENABLED=1 go build ./...` — build succeeded
+- `gofmt -l -w . && go vet ./...` — no issues
+
+## Risks And Follow-Up
+- Dark mode selected row background may need further tuning based on user feedback
+- On very narrow screens the batch toolbar may still wrap to multiple lines, which is expected and handled by flex-wrap

web/html/inbounds.html

@@ -584,16 +584,18 @@
                       </a-popover>
                     </template>
                     <template slot="expandedRowRender" slot-scope="record">
-                      <div v-if="clientSelection[record.id] && clientSelection[record.id].length > 0 && record.isMultiUser()" :style="{ marginBottom: '8px', display: 'flex', gap: '8px', alignItems: 'center' }">
-                        <span :style="{ marginInlineEnd: '8px' }">[[ clientSelection[record.id].length ]] {{ i18n "selected" }}</span>
-                        <a-button size="small" type="primary" @click="openBatchEditClient(record.id)">{{ i18n "pages.client.batchEdit" }}</a-button>
-                        <a-button size="small" @click="batchEnableClient(record.id, true)">{{ i18n "enable" }}</a-button>
-                        <a-button size="small" @click="batchEnableClient(record.id, false)">{{ i18n "disabled" }}</a-button>
-                        <a-button size="small" @click="batchResetClientTraffic(record.id)">{{ i18n "pages.inbounds.resetTraffic" }}</a-button>
-                        <a-popconfirm @confirm="batchDelClient(record.id)" title='{{ i18n "pages.inbounds.deleteClientContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger" cancel-text='{{ i18n "cancel"}}'>
-                          <a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
-                          <a-button size="small" type="danger">{{ i18n "delete" }}</a-button>
-                        </a-popconfirm>
+                      <div v-if="clientSelection[record.id] && clientSelection[record.id].length > 0 && record.isMultiUser()" :style="{ marginBottom: '8px', display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', justifyContent: 'space-between' }">
+                        <div :style="{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }">
+                          <strong>[[ clientSelection[record.id].length ]] {{ i18n "selected" }}</strong>
+                          <a-button size="small" type="primary" @click="openBatchEditClient(record.id)">{{ i18n "pages.client.batchEdit" }}</a-button>
+                          <a-button size="small" @click="batchEnableClient(record.id, true)">{{ i18n "enable" }}</a-button>
+                          <a-button size="small" @click="batchEnableClient(record.id, false)">{{ i18n "disabled" }}</a-button>
+                          <a-button size="small" @click="batchResetClientTraffic(record.id)">{{ i18n "pages.inbounds.resetTraffic" }}</a-button>
+                          <a-popconfirm @confirm="batchDelClient(record.id)" title='{{ i18n "pages.inbounds.deleteClientContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger" cancel-text='{{ i18n "cancel"}}'>
+                            <a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
+                            <a-button size="small" type="danger">{{ i18n "delete" }}</a-button>
+                          </a-popconfirm>
+                        </div>
                         <a-button size="small" @click="clearClientSelection(record.id)">{{ i18n "pages.client.batchDeselect" }}</a-button>
                       </div>
                       <a-table :row-key="client => getClientRowKey(record.protocol, client)" :columns="isMobile ? innerMobileColumns : innerColumns"

web/public/assets-manifest.json

@@ -20,7 +20,7 @@
   "codemirror/lint/lint.js": "codemirror/lint/lint.8d16a6b4.js",
   "codemirror/xq.min.css": "codemirror/xq.min.18b37ea8.css",
   "codemirror/yaml.js": "codemirror/yaml.7f87153b.js",
-  "css/custom.min.css": "css/custom.min.7a7540cc.css",
+  "css/custom.min.css": "css/custom.min.64138d46.css",
   "js/axios-init.js": "js/axios-init.5d82a152.js",
   "js/model/dbinbound.js": "js/model/dbinbound.2232a7d6.js",
   "js/model/inbound.js": "js/model/inbound.afa36664.js",