dsh-remote-mobile 1.4.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/client.js CHANGED
@@ -1073,7 +1073,7 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
1073
1073
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
1074
1074
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
1075
1075
  borderRadius: "12px",
1076
- padding: "18px 20px"
1076
+ padding: "14px 14px"
1077
1077
  },
1078
1078
  children: [
1079
1079
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1107,176 +1107,203 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
1107
1107
  borderBottom: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.12))",
1108
1108
  marginBottom: "16px",
1109
1109
  display: "flex",
1110
- justifyContent: "space-between",
1111
- alignItems: "flex-start",
1112
- gap: "16px"
1110
+ flexDirection: "column",
1111
+ gap: "10px"
1113
1112
  },
1114
1113
  children: [
1115
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }, children: [
1116
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
1117
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F512}" }),
1118
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "14px", fontWeight: "700", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("tailscaleSectionTitle", lang) }),
1119
- status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1120
- "span",
1121
- {
1122
- style: {
1123
- fontSize: "11px",
1124
- padding: "2px 6px",
1125
- borderRadius: "4px",
1126
- background: "rgba(16,185,129,0.15)",
1127
- color: "#10b981",
1128
- fontWeight: "600",
1129
- whiteSpace: "nowrap",
1130
- flexShrink: 0
1131
- },
1132
- children: lang === "en" ? "Connected" : "\u5DF2\u8FDE\u63A5"
1133
- }
1134
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1135
- "span",
1136
- {
1137
- style: {
1138
- fontSize: "11px",
1139
- padding: "2px 6px",
1140
- borderRadius: "4px",
1141
- background: "rgba(239,68,68,0.15)",
1142
- color: "#ef4444",
1143
- fontWeight: "600",
1144
- whiteSpace: "nowrap",
1145
- flexShrink: 0
1146
- },
1147
- children: lang === "en" ? "Not Connected" : "\u672A\u8FDE\u63A5"
1148
- }
1149
- )
1150
- ] }),
1151
- status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1152
- "div",
1153
- {
1154
- style: {
1155
- fontSize: "13px",
1156
- fontFamily: "monospace",
1157
- color: "var(--dsw-alias-brand-primary, #3b82f6)",
1158
- display: "flex",
1159
- alignItems: "center",
1160
- flexWrap: "wrap",
1161
- gap: "8px"
1162
- },
1163
- children: [
1164
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: `http://${tsHost}:${port}` }),
1165
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1166
- "button",
1114
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1115
+ "div",
1116
+ {
1117
+ style: {
1118
+ display: "flex",
1119
+ alignItems: "center",
1120
+ justifyContent: "space-between",
1121
+ flexWrap: "wrap",
1122
+ gap: "8px 12px"
1123
+ },
1124
+ children: [
1125
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
1126
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F512}" }),
1127
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "14px", fontWeight: "700", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("tailscaleSectionTitle", lang) }),
1128
+ status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1129
+ "span",
1167
1130
  {
1168
- type: "button",
1169
- onClick: () => copyText(`http://${tsHost}:${port}`, t("copiedTip", lang)),
1170
1131
  style: {
1171
- padding: "2px 8px",
1172
- background: "transparent",
1173
- border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
1174
- borderRadius: "4px",
1175
1132
  fontSize: "11px",
1176
- cursor: "pointer",
1177
- color: "var(--dsw-alias-label-secondary, inherit)",
1133
+ padding: "2px 6px",
1134
+ borderRadius: "4px",
1135
+ background: "rgba(16,185,129,0.15)",
1136
+ color: "#10b981",
1137
+ fontWeight: "600",
1178
1138
  whiteSpace: "nowrap",
1179
1139
  flexShrink: 0
1180
1140
  },
1181
- children: t("copyUrlBtn", lang)
1141
+ children: lang === "en" ? "Connected" : "\u5DF2\u8FDE\u63A5"
1182
1142
  }
1183
- )
1184
- ]
1185
- }
1186
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1187
- "div",
1188
- {
1189
- style: {
1190
- fontSize: "12px",
1191
- color: "var(--dsw-alias-label-tertiary, #888)",
1192
- lineHeight: "1.4"
1193
- },
1194
- children: t("tailscaleGuide", lang)
1195
- }
1196
- ),
1197
- status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1198
- "div",
1199
- {
1200
- style: {
1201
- fontSize: "12px",
1202
- color: "var(--dsw-alias-label-tertiary, #888)",
1203
- lineHeight: "1.4"
1204
- },
1205
- children: t("tailscaleBypassDesc", lang)
1206
- }
1207
- ) : null
1208
- ] }),
1209
- status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0, paddingTop: "2px" }, children: [
1210
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1211
- "span",
1212
- {
1213
- style: {
1214
- fontSize: "12px",
1215
- color: status.allowTailscale ? "var(--dsw-alias-brand-primary, #3b82f6)" : "var(--dsw-alias-label-secondary, #888)",
1216
- fontWeight: "600",
1217
- whiteSpace: "nowrap"
1218
- },
1219
- children: status.allowTailscale ? t("directBypassOn", lang) : t("directBypassOff", lang)
1220
- }
1221
- ),
1222
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1223
- "label",
1224
- {
1225
- style: {
1226
- position: "relative",
1227
- display: "inline-block",
1228
- width: "44px",
1229
- height: "24px",
1230
- cursor: "pointer",
1231
- userSelect: "none",
1232
- flexShrink: 0
1233
- },
1234
- children: [
1235
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1236
- "input",
1143
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1144
+ "span",
1237
1145
  {
1238
- type: "checkbox",
1239
- checked: !!status.allowTailscale,
1240
- onChange: toggleTailscale,
1241
- style: { opacity: 0, width: 0, height: 0, margin: 0 }
1146
+ style: {
1147
+ fontSize: "11px",
1148
+ padding: "2px 6px",
1149
+ borderRadius: "4px",
1150
+ background: "rgba(239,68,68,0.15)",
1151
+ color: "#ef4444",
1152
+ fontWeight: "600",
1153
+ whiteSpace: "nowrap",
1154
+ flexShrink: 0
1155
+ },
1156
+ children: lang === "en" ? "Not Connected" : "\u672A\u8FDE\u63A5"
1242
1157
  }
1243
- ),
1158
+ )
1159
+ ] }),
1160
+ status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0, marginLeft: "auto" }, children: [
1244
1161
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1245
1162
  "span",
1246
1163
  {
1247
1164
  style: {
1248
- position: "absolute",
1249
- top: 0,
1250
- left: 0,
1251
- right: 0,
1252
- bottom: 0,
1253
- backgroundColor: status.allowTailscale ? "var(--dsw-alias-brand-primary, #3b82f6)" : "var(--dsw-alias-border-l2, rgba(128,128,128,0.3))",
1254
- transition: "background-color 0.25s ease",
1255
- borderRadius: "24px"
1256
- }
1165
+ fontSize: "12px",
1166
+ color: status.allowTailscale ? "var(--dsw-alias-brand-primary, #3b82f6)" : "var(--dsw-alias-label-secondary, #888)",
1167
+ fontWeight: "600",
1168
+ whiteSpace: "nowrap"
1169
+ },
1170
+ children: status.allowTailscale ? t("directBypassOn", lang) : t("directBypassOff", lang)
1257
1171
  }
1258
1172
  ),
1259
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1260
- "span",
1173
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1174
+ "label",
1261
1175
  {
1262
1176
  style: {
1263
- position: "absolute",
1264
- top: "3px",
1265
- left: "3px",
1266
- width: "18px",
1267
- height: "18px",
1268
- backgroundColor: "#ffffff",
1269
- borderRadius: "50%",
1270
- boxShadow: "0 2px 4px rgba(0, 0, 0, 0.25)",
1271
- transform: status.allowTailscale ? "translateX(20px)" : "translateX(0px)",
1272
- transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
1273
- }
1177
+ position: "relative",
1178
+ display: "inline-block",
1179
+ width: "44px",
1180
+ height: "24px",
1181
+ cursor: "pointer",
1182
+ userSelect: "none",
1183
+ flexShrink: 0
1184
+ },
1185
+ children: [
1186
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1187
+ "input",
1188
+ {
1189
+ type: "checkbox",
1190
+ checked: !!status.allowTailscale,
1191
+ onChange: toggleTailscale,
1192
+ style: { opacity: 0, width: 0, height: 0, margin: 0 }
1193
+ }
1194
+ ),
1195
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1196
+ "span",
1197
+ {
1198
+ style: {
1199
+ position: "absolute",
1200
+ top: 0,
1201
+ left: 0,
1202
+ right: 0,
1203
+ bottom: 0,
1204
+ backgroundColor: status.allowTailscale ? "var(--dsw-alias-brand-primary, #3b82f6)" : "var(--dsw-alias-border-l2, rgba(128,128,128,0.3))",
1205
+ transition: "background-color 0.25s ease",
1206
+ borderRadius: "24px"
1207
+ }
1208
+ }
1209
+ ),
1210
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1211
+ "span",
1212
+ {
1213
+ style: {
1214
+ position: "absolute",
1215
+ top: "3px",
1216
+ left: "3px",
1217
+ width: "18px",
1218
+ height: "18px",
1219
+ backgroundColor: "#ffffff",
1220
+ borderRadius: "50%",
1221
+ boxShadow: "0 2px 4px rgba(0, 0, 0, 0.25)",
1222
+ transform: status.allowTailscale ? "translateX(20px)" : "translateX(0px)",
1223
+ transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
1224
+ }
1225
+ }
1226
+ )
1227
+ ]
1274
1228
  }
1275
1229
  )
1276
- ]
1277
- }
1278
- )
1279
- ] }) : null
1230
+ ] }) : null
1231
+ ]
1232
+ }
1233
+ ),
1234
+ status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1235
+ "div",
1236
+ {
1237
+ style: {
1238
+ fontSize: "13px",
1239
+ fontFamily: "monospace",
1240
+ color: "var(--dsw-alias-brand-primary, #3b82f6)",
1241
+ display: "flex",
1242
+ alignItems: "center",
1243
+ justifyContent: "space-between",
1244
+ gap: "8px",
1245
+ padding: "6px 10px",
1246
+ background: "var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.08))",
1247
+ border: "1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.15))",
1248
+ borderRadius: "8px"
1249
+ },
1250
+ children: [
1251
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1252
+ "span",
1253
+ {
1254
+ style: {
1255
+ overflow: "hidden",
1256
+ textOverflow: "ellipsis",
1257
+ whiteSpace: "nowrap",
1258
+ flex: 1,
1259
+ minWidth: 0
1260
+ },
1261
+ children: `http://${tsHost}:${port}`
1262
+ }
1263
+ ),
1264
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1265
+ "button",
1266
+ {
1267
+ type: "button",
1268
+ onClick: () => copyText(`http://${tsHost}:${port}`, t("copiedTip", lang)),
1269
+ style: {
1270
+ padding: "3px 10px",
1271
+ background: "var(--dsw-alias-bg-layer-3, rgba(255, 255, 255, 0.08))",
1272
+ border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
1273
+ borderRadius: "4px",
1274
+ fontSize: "11px",
1275
+ cursor: "pointer",
1276
+ color: "var(--dsw-alias-label-secondary, inherit)",
1277
+ whiteSpace: "nowrap",
1278
+ flexShrink: 0
1279
+ },
1280
+ children: t("copyUrlBtn", lang)
1281
+ }
1282
+ )
1283
+ ]
1284
+ }
1285
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1286
+ "div",
1287
+ {
1288
+ style: {
1289
+ fontSize: "12px",
1290
+ color: "var(--dsw-alias-label-tertiary, #888)",
1291
+ lineHeight: "1.4"
1292
+ },
1293
+ children: t("tailscaleGuide", lang)
1294
+ }
1295
+ ),
1296
+ status.tailscaleIp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1297
+ "div",
1298
+ {
1299
+ style: {
1300
+ fontSize: "12px",
1301
+ color: "var(--dsw-alias-label-tertiary, #888)",
1302
+ lineHeight: "1.4"
1303
+ },
1304
+ children: t("tailscaleBypassDesc", lang)
1305
+ }
1306
+ ) : null
1280
1307
  ]
1281
1308
  }
1282
1309
  ),
@@ -1286,70 +1313,33 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
1286
1313
  {
1287
1314
  style: {
1288
1315
  display: "flex",
1316
+ alignItems: "center",
1289
1317
  justifyContent: "space-between",
1290
- alignItems: "flex-start",
1291
- gap: "16px"
1318
+ flexWrap: "wrap",
1319
+ gap: "8px 12px"
1292
1320
  },
1293
1321
  children: [
1294
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }, children: [
1295
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
1296
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F3E0}" }),
1297
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "14px", fontWeight: "700", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("lanSectionTitle", lang) }),
1298
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1299
- "span",
1300
- {
1301
- style: {
1302
- fontSize: "11px",
1303
- padding: "2px 6px",
1304
- borderRadius: "4px",
1305
- background: "rgba(16,185,129,0.15)",
1306
- color: "#10b981",
1307
- fontWeight: "600",
1308
- whiteSpace: "nowrap",
1309
- flexShrink: 0
1310
- },
1311
- children: lang === "en" ? "Ready" : "\u5DF2\u5C31\u7EEA"
1312
- }
1313
- )
1314
- ] }),
1315
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1316
- "div",
1322
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
1323
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F3E0}" }),
1324
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "14px", fontWeight: "700", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("lanSectionTitle", lang) }),
1325
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1326
+ "span",
1317
1327
  {
1318
1328
  style: {
1319
- fontSize: "13px",
1320
- fontFamily: "monospace",
1321
- color: "var(--dsw-alias-brand-primary, #3b82f6)",
1322
- display: "flex",
1323
- alignItems: "center",
1324
- flexWrap: "wrap",
1325
- gap: "8px"
1329
+ fontSize: "11px",
1330
+ padding: "2px 6px",
1331
+ borderRadius: "4px",
1332
+ background: "rgba(16,185,129,0.15)",
1333
+ color: "#10b981",
1334
+ fontWeight: "600",
1335
+ whiteSpace: "nowrap",
1336
+ flexShrink: 0
1326
1337
  },
1327
- children: [
1328
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: `http://${lanHost}:${port}` }),
1329
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1330
- "button",
1331
- {
1332
- type: "button",
1333
- onClick: () => copyText(`http://${lanHost}:${port}`, t("copiedTip", lang)),
1334
- style: {
1335
- padding: "2px 8px",
1336
- background: "transparent",
1337
- border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
1338
- borderRadius: "4px",
1339
- fontSize: "11px",
1340
- cursor: "pointer",
1341
- color: "var(--dsw-alias-label-secondary, inherit)",
1342
- whiteSpace: "nowrap",
1343
- flexShrink: 0
1344
- },
1345
- children: t("copyUrlBtn", lang)
1346
- }
1347
- )
1348
- ]
1338
+ children: lang === "en" ? "Ready" : "\u5DF2\u5C31\u7EEA"
1349
1339
  }
1350
1340
  )
1351
1341
  ] }),
1352
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0, paddingTop: "2px" }, children: [
1342
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0, marginLeft: "auto" }, children: [
1353
1343
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1354
1344
  "span",
1355
1345
  {
@@ -1427,6 +1417,58 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
1427
1417
  ]
1428
1418
  }
1429
1419
  ),
1420
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1421
+ "div",
1422
+ {
1423
+ style: {
1424
+ fontSize: "13px",
1425
+ fontFamily: "monospace",
1426
+ color: "var(--dsw-alias-brand-primary, #3b82f6)",
1427
+ display: "flex",
1428
+ alignItems: "center",
1429
+ justifyContent: "space-between",
1430
+ gap: "8px",
1431
+ padding: "6px 10px",
1432
+ background: "var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.08))",
1433
+ border: "1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.15))",
1434
+ borderRadius: "8px"
1435
+ },
1436
+ children: [
1437
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1438
+ "span",
1439
+ {
1440
+ style: {
1441
+ overflow: "hidden",
1442
+ textOverflow: "ellipsis",
1443
+ whiteSpace: "nowrap",
1444
+ flex: 1,
1445
+ minWidth: 0
1446
+ },
1447
+ children: `http://${lanHost}:${port}`
1448
+ }
1449
+ ),
1450
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1451
+ "button",
1452
+ {
1453
+ type: "button",
1454
+ onClick: () => copyText(`http://${lanHost}:${port}`, t("copiedTip", lang)),
1455
+ style: {
1456
+ padding: "3px 10px",
1457
+ background: "var(--dsw-alias-bg-layer-3, rgba(255, 255, 255, 0.08))",
1458
+ border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
1459
+ borderRadius: "4px",
1460
+ fontSize: "11px",
1461
+ cursor: "pointer",
1462
+ color: "var(--dsw-alias-label-secondary, inherit)",
1463
+ whiteSpace: "nowrap",
1464
+ flexShrink: 0
1465
+ },
1466
+ children: t("copyUrlBtn", lang)
1467
+ }
1468
+ )
1469
+ ]
1470
+ }
1471
+ ),
1430
1472
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1431
1473
  "div",
1432
1474
  {
@@ -1537,7 +1579,7 @@ function QrPairingCard({
1537
1579
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
1538
1580
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
1539
1581
  borderRadius: "12px",
1540
- padding: "20px",
1582
+ padding: "14px 14px",
1541
1583
  textAlign: "center"
1542
1584
  },
1543
1585
  children: [
@@ -1806,7 +1848,9 @@ function QrPairingCard({
1806
1848
  borderRadius: "8px",
1807
1849
  fontSize: "13px",
1808
1850
  fontWeight: "600",
1809
- cursor: "pointer"
1851
+ cursor: "pointer",
1852
+ whiteSpace: "nowrap",
1853
+ flexShrink: 0
1810
1854
  },
1811
1855
  children: showQr ? `\u{1F4F7} ${t("toggleQrHide", lang)}` : `\u{1F4F7} ${t("toggleQrShow", lang)}`
1812
1856
  }
@@ -1824,7 +1868,9 @@ function QrPairingCard({
1824
1868
  borderRadius: "8px",
1825
1869
  fontSize: "13px",
1826
1870
  fontWeight: "600",
1827
- cursor: "pointer"
1871
+ cursor: "pointer",
1872
+ whiteSpace: "nowrap",
1873
+ flexShrink: 0
1828
1874
  },
1829
1875
  children: t("refreshCodeBtn", lang)
1830
1876
  }
@@ -1857,7 +1903,7 @@ function SecretCard({
1857
1903
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
1858
1904
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
1859
1905
  borderRadius: "12px",
1860
- padding: "18px 20px"
1906
+ padding: "14px 14px"
1861
1907
  },
1862
1908
  children: [
1863
1909
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1926,13 +1972,14 @@ function SecretCard({
1926
1972
  children: t("secretCardDesc", lang)
1927
1973
  }
1928
1974
  ),
1929
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
1975
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center", flexWrap: "wrap" }, children: [
1930
1976
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1931
1977
  "div",
1932
1978
  {
1933
1979
  style: {
1934
1980
  position: "relative",
1935
- flex: 1,
1981
+ flex: "1 1 200px",
1982
+ minWidth: "200px",
1936
1983
  display: "flex",
1937
1984
  alignItems: "center"
1938
1985
  },
@@ -2052,7 +2099,7 @@ function DeviceListCard({ status, revokeDevice, revokeAll, lang }) {
2052
2099
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
2053
2100
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
2054
2101
  borderRadius: "12px",
2055
- padding: "18px 20px"
2102
+ padding: "14px 14px"
2056
2103
  },
2057
2104
  children: [
2058
2105
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -2062,34 +2109,22 @@ function DeviceListCard({ status, revokeDevice, revokeAll, lang }) {
2062
2109
  display: "flex",
2063
2110
  alignItems: "center",
2064
2111
  justifyContent: "space-between",
2065
- gap: "12px",
2066
- marginBottom: "14px"
2112
+ flexWrap: "wrap",
2113
+ gap: "8px 12px",
2114
+ marginBottom: "6px"
2067
2115
  },
2068
2116
  children: [
2069
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { minWidth: 0 }, children: [
2070
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2071
- "div",
2072
- {
2073
- style: {
2074
- fontSize: "15px",
2075
- fontWeight: "600",
2076
- color: "var(--dsw-alias-label-primary, inherit)"
2077
- },
2078
- children: `\u{1F4F1} ${t("deviceCardTitle", lang)} (${status.devicesCount}${lang === "en" ? " devices" : " \u53F0"})`
2079
- }
2080
- ),
2081
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2082
- "div",
2083
- {
2084
- style: {
2085
- fontSize: "12px",
2086
- color: "var(--dsw-alias-label-tertiary, #888)",
2087
- marginTop: "2px"
2088
- },
2089
- children: t("deviceCardDesc", lang)
2090
- }
2091
- )
2092
- ] }),
2117
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2118
+ "div",
2119
+ {
2120
+ style: {
2121
+ fontSize: "15px",
2122
+ fontWeight: "600",
2123
+ color: "var(--dsw-alias-label-primary, inherit)"
2124
+ },
2125
+ children: `\u{1F4F1} ${t("deviceCardTitle", lang)} (${status.devicesCount}${lang === "en" ? " devices" : " \u53F0"})`
2126
+ }
2127
+ ),
2093
2128
  status.devicesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2094
2129
  "button",
2095
2130
  {
@@ -2099,12 +2134,13 @@ function DeviceListCard({ status, revokeDevice, revokeAll, lang }) {
2099
2134
  background: "transparent",
2100
2135
  border: "1px solid rgba(239,68,68,0.4)",
2101
2136
  color: "var(--dsw-alias-label-error, #ef4444)",
2102
- padding: "5px 12px",
2137
+ padding: "4px 10px",
2103
2138
  borderRadius: "6px",
2104
- fontSize: "12px",
2139
+ fontSize: "11px",
2105
2140
  cursor: "pointer",
2106
2141
  whiteSpace: "nowrap",
2107
- flexShrink: 0
2142
+ flexShrink: 0,
2143
+ marginLeft: "auto"
2108
2144
  },
2109
2145
  children: t("revokeAllBtn", lang)
2110
2146
  }
@@ -2112,6 +2148,18 @@ function DeviceListCard({ status, revokeDevice, revokeAll, lang }) {
2112
2148
  ]
2113
2149
  }
2114
2150
  ),
2151
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2152
+ "div",
2153
+ {
2154
+ style: {
2155
+ fontSize: "12px",
2156
+ color: "var(--dsw-alias-label-tertiary, #888)",
2157
+ lineHeight: "1.45",
2158
+ marginBottom: "14px"
2159
+ },
2160
+ children: t("deviceCardDesc", lang)
2161
+ }
2162
+ ),
2115
2163
  status.devices && status.devices.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: status.devices.map((dev) => {
2116
2164
  const isLocal = isCurrentLocalIp(dev.ip, status);
2117
2165
  const ipLabel = `${dev.ip}${isLocal ? lang === "en" ? " (Local)" : " (\u672C\u673A)" : ""}`;
@@ -2254,7 +2302,7 @@ function SecurityCard({ status, unlockIp, clearIpStats, lang }) {
2254
2302
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
2255
2303
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
2256
2304
  borderRadius: "12px",
2257
- padding: "18px 20px"
2305
+ padding: "14px 14px"
2258
2306
  },
2259
2307
  children: [
2260
2308
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -2264,19 +2312,20 @@ function SecurityCard({ status, unlockIp, clearIpStats, lang }) {
2264
2312
  display: "flex",
2265
2313
  alignItems: "center",
2266
2314
  justifyContent: "space-between",
2315
+ flexWrap: "wrap",
2316
+ gap: "8px 12px",
2267
2317
  marginBottom: "8px"
2268
2318
  },
2269
2319
  children: [
2270
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
2271
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "16px" }, children: "\u{1F6E1}\uFE0F" }),
2320
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }, children: [
2321
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F6E1}\uFE0F" }),
2272
2322
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2273
2323
  "span",
2274
2324
  {
2275
2325
  style: {
2276
2326
  fontSize: "15px",
2277
2327
  fontWeight: "600",
2278
- color: "var(--dsw-alias-label-primary, inherit)",
2279
- whiteSpace: "nowrap"
2328
+ color: "var(--dsw-alias-label-primary, inherit)"
2280
2329
  },
2281
2330
  children: t("securityCardTitle", lang)
2282
2331
  }
@@ -2291,10 +2340,13 @@ function SecurityCard({ status, unlockIp, clearIpStats, lang }) {
2291
2340
  background: "transparent",
2292
2341
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
2293
2342
  color: "var(--dsw-alias-label-secondary, inherit)",
2294
- padding: "3px 10px",
2343
+ padding: "4px 10px",
2295
2344
  borderRadius: "6px",
2296
- fontSize: "12px",
2297
- cursor: "pointer"
2345
+ fontSize: "11px",
2346
+ cursor: "pointer",
2347
+ whiteSpace: "nowrap",
2348
+ flexShrink: 0,
2349
+ marginLeft: "auto"
2298
2350
  },
2299
2351
  children: t("clearSecurityLogBtn", lang)
2300
2352
  }
@@ -2598,7 +2650,7 @@ function StorageCard({ status, lang, copyText }) {
2598
2650
  background: "var(--dsw-alias-bg-layer-2, rgba(128,128,128,0.04))",
2599
2651
  border: "1px dashed var(--dsw-alias-border-l2, rgba(128,128,128,0.2))",
2600
2652
  borderRadius: "10px",
2601
- padding: "14px 16px",
2653
+ padding: "14px 14px",
2602
2654
  display: "flex",
2603
2655
  flexDirection: "column",
2604
2656
  gap: "10px"
@@ -2693,7 +2745,7 @@ function ConfigCard({
2693
2745
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
2694
2746
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
2695
2747
  borderRadius: "12px",
2696
- padding: "18px 20px",
2748
+ padding: "14px 14px",
2697
2749
  display: "flex",
2698
2750
  flexDirection: "column",
2699
2751
  gap: "14px"
@@ -2706,7 +2758,8 @@ function ConfigCard({
2706
2758
  display: "flex",
2707
2759
  alignItems: "center",
2708
2760
  justifyContent: "space-between",
2709
- gap: "10px"
2761
+ flexWrap: "wrap",
2762
+ gap: "8px 12px"
2710
2763
  },
2711
2764
  children: [
2712
2765
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
@@ -2744,7 +2797,8 @@ function ConfigCard({
2744
2797
  fontSize: "11px",
2745
2798
  cursor: "pointer",
2746
2799
  whiteSpace: "nowrap",
2747
- flexShrink: 0
2800
+ flexShrink: 0,
2801
+ marginLeft: "auto"
2748
2802
  },
2749
2803
  children: t("copySettingsPathBtn", lang)
2750
2804
  }
@@ -3122,17 +3176,21 @@ function StylesCard({ lang, showToast }) {
3122
3176
  background: "var(--dsw-alias-bg-layer-2, rgba(128,128,128,0.06))",
3123
3177
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.12))",
3124
3178
  borderRadius: "8px",
3125
- padding: "10px 12px"
3179
+ padding: "10px 12px",
3180
+ boxSizing: "border-box",
3181
+ maxWidth: "100%",
3182
+ overflow: "hidden"
3126
3183
  };
3127
3184
  const miniBtnStyle = {
3128
- padding: "4px 10px",
3185
+ padding: "4px 8px",
3129
3186
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.1))",
3130
3187
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.2))",
3131
3188
  color: "var(--dsw-alias-label-secondary, inherit)",
3132
3189
  borderRadius: "6px",
3133
3190
  fontSize: "11px",
3134
3191
  cursor: "pointer",
3135
- whiteSpace: "nowrap"
3192
+ whiteSpace: "nowrap",
3193
+ flexShrink: 0
3136
3194
  };
3137
3195
  const primaryBtnStyle = {
3138
3196
  ...miniBtnStyle,
@@ -3147,7 +3205,7 @@ function StylesCard({ lang, showToast }) {
3147
3205
  background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
3148
3206
  border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
3149
3207
  borderRadius: "12px",
3150
- padding: "18px 20px",
3208
+ padding: "14px 14px",
3151
3209
  display: "flex",
3152
3210
  flexDirection: "column",
3153
3211
  gap: "14px"
@@ -3179,8 +3237,8 @@ function StylesCard({ lang, showToast }) {
3179
3237
  snippets.some((s) => s.builtin) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
3180
3238
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "13px", fontWeight: "600", color: "var(--dsw-alias-label-secondary, inherit)" }, children: t("stylesPresetsTitle", lang) }),
3181
3239
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: snippets.filter((s) => s.builtin).map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
3182
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px", flexWrap: "wrap" }, children: [
3183
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: "180px" }, children: [
3240
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }, children: [
3241
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: "1 1 180px", minWidth: 0, maxWidth: "100%" }, children: [
3184
3242
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3185
3243
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "12px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: s.name }),
3186
3244
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3214,8 +3272,8 @@ function StylesCard({ lang, showToast }) {
3214
3272
  ] }),
3215
3273
  s.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", marginTop: "3px" }, children: s.description }) : null
3216
3274
  ] }),
3217
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0, flexWrap: "wrap" }, children: [
3218
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer" }, children: [
3275
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px 8px", flexWrap: "wrap", maxWidth: "100%" }, children: [
3276
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
3219
3277
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3220
3278
  "input",
3221
3279
  {
@@ -3228,7 +3286,7 @@ function StylesCard({ lang, showToast }) {
3228
3286
  "\u{1F5A5}\uFE0F ",
3229
3287
  t("stylesPcShort", lang)
3230
3288
  ] }),
3231
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer" }, children: [
3289
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
3232
3290
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3233
3291
  "input",
3234
3292
  {
@@ -3241,8 +3299,10 @@ function StylesCard({ lang, showToast }) {
3241
3299
  "\u{1F4F1} ",
3242
3300
  t("stylesMobileShort", lang)
3243
3301
  ] }),
3244
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
3245
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
3302
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3303
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
3304
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
3305
+ ] })
3246
3306
  ] })
3247
3307
  ] }),
3248
3308
  expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3380,8 +3440,8 @@ function StylesCard({ lang, showToast }) {
3380
3440
  }
3381
3441
  ),
3382
3442
  snippets.filter((s) => !s.builtin).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)" }, children: t("stylesEmptyCustom", lang) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: snippets.filter((s) => !s.builtin).map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
3383
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px", flexWrap: "wrap" }, children: [
3384
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: "180px" }, children: [
3443
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }, children: [
3444
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: "1 1 180px", minWidth: 0, maxWidth: "100%" }, children: [
3385
3445
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3386
3446
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "12px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: s.name }),
3387
3447
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3401,8 +3461,8 @@ function StylesCard({ lang, showToast }) {
3401
3461
  ] }),
3402
3462
  s.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", marginTop: "3px" }, children: s.description }) : null
3403
3463
  ] }),
3404
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0, flexWrap: "wrap" }, children: [
3405
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer" }, children: [
3464
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px 8px", flexWrap: "wrap", maxWidth: "100%" }, children: [
3465
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
3406
3466
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3407
3467
  "input",
3408
3468
  {
@@ -3415,7 +3475,7 @@ function StylesCard({ lang, showToast }) {
3415
3475
  "\u{1F5A5}\uFE0F ",
3416
3476
  t("stylesPcShort", lang)
3417
3477
  ] }),
3418
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer" }, children: [
3478
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
3419
3479
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3420
3480
  "input",
3421
3481
  {
@@ -3428,10 +3488,12 @@ function StylesCard({ lang, showToast }) {
3428
3488
  "\u{1F4F1} ",
3429
3489
  t("stylesMobileShort", lang)
3430
3490
  ] }),
3431
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => startEdit(s), style: miniBtnStyle, children: t("stylesEditBtn", lang) }),
3432
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => remove(s), style: { ...miniBtnStyle, color: "#ef4444" }, children: t("stylesDeleteBtn", lang) }),
3433
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
3434
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
3491
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3492
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => startEdit(s), style: miniBtnStyle, children: t("stylesEditBtn", lang) }),
3493
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => remove(s), style: { ...miniBtnStyle, color: "#ef4444" }, children: t("stylesDeleteBtn", lang) }),
3494
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
3495
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
3496
+ ] })
3435
3497
  ] })
3436
3498
  ] }),
3437
3499
  expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3464,8 +3526,8 @@ function StylesCard({ lang, showToast }) {
3464
3526
  }
3465
3527
 
3466
3528
  // src/client/version.js
3467
- var PLUGIN_VERSION = "v1.4.3";
3468
- var BUILD_TIME = "2026-09-03 21:12:49";
3529
+ var PLUGIN_VERSION = "v1.6.0";
3530
+ var BUILD_TIME = "2026-09-06 01:42:18";
3469
3531
 
3470
3532
  // src/client/components/MainSection.jsx
3471
3533
  var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -3913,11 +3975,11 @@ function TailscaleMobileSection(props) {
3913
3975
  "div",
3914
3976
  {
3915
3977
  style: {
3916
- padding: "4px 8px",
3978
+ padding: "2px 4px",
3917
3979
  color: "var(--dsw-alias-label-primary, inherit)",
3918
3980
  display: "flex",
3919
3981
  flexDirection: "column",
3920
- gap: "16px",
3982
+ gap: "14px",
3921
3983
  position: "relative"
3922
3984
  },
3923
3985
  children: [
@@ -4221,10 +4283,14 @@ function TailscaleMobileSection(props) {
4221
4283
  {
4222
4284
  style: {
4223
4285
  display: "flex",
4224
- gap: "24px",
4286
+ gap: "14px",
4225
4287
  borderBottom: "1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.2))",
4226
4288
  paddingBottom: "0",
4227
- marginBottom: "6px"
4289
+ marginBottom: "6px",
4290
+ overflowX: "auto",
4291
+ overflowY: "hidden",
4292
+ WebkitOverflowScrolling: "touch",
4293
+ scrollbarWidth: "none"
4228
4294
  },
4229
4295
  children: [
4230
4296
  { id: "access", label: t("tabAccess", currentLang) },
@@ -4242,10 +4308,12 @@ function TailscaleMobileSection(props) {
4242
4308
  background: "transparent",
4243
4309
  border: "none",
4244
4310
  outline: "none",
4245
- padding: "8px 2px 10px 2px",
4246
- fontSize: "14px",
4311
+ padding: "6px 2px 8px 2px",
4312
+ fontSize: "13px",
4247
4313
  fontWeight: isActive ? "600" : "400",
4248
4314
  cursor: "pointer",
4315
+ whiteSpace: "nowrap",
4316
+ flexShrink: 0,
4249
4317
  color: isActive ? "var(--dsw-alias-label-primary, #111827)" : "var(--dsw-alias-label-tertiary, #8c8c8c)",
4250
4318
  borderBottom: isActive ? "2px solid var(--dsw-alias-label-primary, #111827)" : "2px solid transparent",
4251
4319
  marginBottom: "-1px",