diff --git a/web/app.js b/web/app.js
index 930aaed..5e0696a 100644
--- a/web/app.js
+++ b/web/app.js
@@ -611,7 +611,7 @@ function renderDevices() {
${escapeHtml(wan.label)}
- Clients
+ Клиенты
${clients.total}
diff --git a/web/styles.css b/web/styles.css
index d603644..53bd86e 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1904,15 +1904,6 @@ select {
display: block;
}
- .device-item > .device-field:nth-child(5) .device-field-label {
- font-size: 0;
- }
-
- .device-item > .device-field:nth-child(5) .device-field-label::after {
- content: "Клиенты";
- font-size: 11px;
- }
-
.device-item strong,
.device-item small,
.device-item span,
@@ -1925,6 +1916,143 @@ select {
display: none;
}
+ .section-title,
+ .section-actions,
+ .client-toolbar,
+ .filters,
+ .command-filters,
+ .preset-review-header,
+ .preset-review-actions,
+ .row-actions,
+ .operation-status,
+ .expert-notice,
+ .remote-session-main {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .section-actions,
+ .row-actions {
+ width: 100%;
+ }
+
+ .section-actions > *,
+ .row-actions > *,
+ .command-filters select,
+ .summary-pill {
+ width: 100%;
+ }
+
+ .filters {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .client-table-head,
+ .network-table-head {
+ display: none;
+ }
+
+ .client-list,
+ .network-list {
+ overflow: visible;
+ }
+
+ .client-row,
+ .network-row,
+ .command-row,
+ .row.audit,
+ .remote-session-row,
+ .mini-row,
+ .alert-row {
+ grid-template-columns: 1fr;
+ gap: 8px;
+ min-width: 0;
+ border-radius: 8px;
+ background: var(--surface-raised);
+ padding: 12px;
+ }
+
+ .client-row > :not(:first-child),
+ .network-row > *,
+ .command-row > :not(:first-child),
+ .row.audit > *,
+ .mini-row > *,
+ .alert-row > * {
+ display: grid;
+ gap: 4px;
+ min-width: 0;
+ }
+
+ .client-row > :nth-child(2)::before,
+ .client-row > :nth-child(3)::before,
+ .client-row > :nth-child(4)::before,
+ .client-row > :nth-child(5)::before,
+ .client-row > :nth-child(6)::before,
+ .network-row > :nth-child(1)::before,
+ .network-row > :nth-child(2)::before,
+ .network-row > :nth-child(3)::before,
+ .network-row > :nth-child(4)::before,
+ .network-row > :nth-child(5)::before,
+ .command-row > :nth-child(2)::before,
+ .command-row > :nth-child(3)::before,
+ .command-row > :nth-child(4)::before,
+ .command-row > :nth-child(5)::before,
+ .row.audit > :nth-child(1)::before,
+ .row.audit > :nth-child(2)::before,
+ .row.audit > :nth-child(3)::before {
+ color: var(--muted);
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ }
+
+ .client-row > :nth-child(2)::before { content: "IP"; }
+ .client-row > :nth-child(3)::before { content: "MAC"; }
+ .client-row > :nth-child(4)::before { content: "Подключение"; }
+ .client-row > :nth-child(5)::before { content: "Сигнал / скорость"; }
+ .client-row > :nth-child(6)::before { content: "Статус"; }
+
+ .network-row > :nth-child(1)::before { content: "Интерфейс"; }
+ .network-row > :nth-child(2)::before { content: "Адреса"; }
+ .network-row > :nth-child(3)::before { content: "Получено"; }
+ .network-row > :nth-child(4)::before { content: "Передано"; }
+ .network-row > :nth-child(5)::before { content: "Ошибки"; }
+
+ .command-row > :nth-child(2)::before { content: "Статус"; }
+ .command-row > :nth-child(3)::before { content: "Попытка"; }
+ .command-row > :nth-child(4)::before { content: "Время"; }
+ .command-row > :nth-child(5)::before { content: "Вывод"; }
+
+ .row.audit > :nth-child(1)::before { content: "Время"; }
+ .row.audit > :nth-child(2)::before { content: "Действие"; }
+ .row.audit > :nth-child(3)::before { content: "Контекст"; }
+
+ .command-output summary,
+ .alert-detail summary,
+ .remote-session-row code,
+ .command-main strong,
+ .command-main small,
+ .detail-meta span,
+ .technical-details code,
+ .information-item strong {
+ white-space: normal;
+ }
+
+ .remote-session-row code {
+ overflow: visible;
+ text-overflow: clip;
+ }
+
+ .row-actions button,
+ .remote-session-row .row-actions button {
+ width: 100%;
+ }
+
+ .detail-meta {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+
.device-header-actions {
display: grid;
grid-template-columns: 1fr;
@@ -1945,4 +2073,11 @@ select {
.panel {
padding: 12px;
}
+
+ .toast-region {
+ right: 12px;
+ left: 12px;
+ bottom: 12px;
+ width: auto;
+ }
}