aktueller stand

web/automation.css

@@ -28,7 +28,7 @@ body {
 }
 
 .auto-shell {
-  max-width: 1300px;
+  max-width: 1500px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -177,6 +177,9 @@ body {
 .field.inline {
   min-width: 0;
 }
+.field[data-section] {
+  display: grid;
+}
 
 label {
   font-weight: 600;
@@ -257,6 +260,7 @@ small {
   text-align: left;
   border-bottom: 1px solid var(--border);
   font-size: 14px;
+  white-space: nowrap;
 }
 
 .auto-table th {
@@ -264,6 +268,48 @@ small {
   font-weight: 600;
 }
 
+.auto-table th[data-sort-column="runs"],
+.auto-table td.runs-count {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.auto-table .sort-indicator {
+  display: inline-block;
+  margin-left: 6px;
+  width: 10px;
+  height: 10px;
+  border: 5px solid transparent;
+  border-bottom: 0;
+  border-left: 0;
+  transform: rotate(45deg);
+  opacity: 0.35;
+}
+
+.auto-table th.sort-asc .sort-indicator {
+  border-top: 6px solid var(--accent-2);
+  transform: rotate(225deg);
+  opacity: 0.9;
+}
+
+.auto-table th.sort-desc .sort-indicator {
+  border-top: 6px solid var(--accent-2);
+  transform: rotate(45deg);
+  opacity: 0.9;
+}
+
+.table-filter-row input,
+.table-filter-row select {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  padding: 8px 10px;
+  background: #0c1427;
+  color: var(--text);
+  font-size: 13px;
+}
+
 .auto-table tr.is-selected {
   background: rgba(14, 165, 233, 0.08);
 }
@@ -307,7 +353,34 @@ small {
 .row-actions {
   display: flex;
   gap: 6px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+}
+
+.hidden-value {
+  display: none;
+}
+
+.icon-btn {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
+}
+
+.icon-btn:hover {
+  transform: translateY(-1px);
+  opacity: 0.95;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.icon-btn.danger {
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.35);
 }
 
 .primary-btn,
@@ -355,6 +428,15 @@ small {
   margin-bottom: 8px;
 }
 
+.filter-input {
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  padding: 8px 10px;
+  background: #0c1427;
+  color: var(--text);
+  min-width: 200px;
+}
+
 .runs-list {
   list-style: none;
   padding: 0;
@@ -551,6 +633,32 @@ small {
   font-size: 13px;
 }
 
+.placeholder-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 6px;
+}
+
+.placeholder-table td {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: var(--text);
+  vertical-align: top;
+}
+
+.placeholder-table td.placeholder-key {
+  width: 30%;
+  color: var(--muted);
+}
+
+.placeholder-hint {
+  color: var(--muted);
+  font-size: 12px;
+  margin: 6px 0 0;
+}
+
 @media (max-width: 1050px) {
   .auto-grid {
     grid-template-columns: 1fr;