solid_queue_monitor 0.6.0 → 1.0.1

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.
@@ -101,6 +101,29 @@ module SolidQueueMonitor
101
101
  background: var(--background-color);
102
102
  }
103
103
 
104
+ .solid_queue_monitor .section-header-row {
105
+ display: flex;
106
+ justify-content: space-between;
107
+ align-items: center;
108
+ margin-bottom: 1.5rem;
109
+ padding: 1rem;
110
+ background: var(--card-background);
111
+ border-radius: 0.5rem;
112
+ box-shadow: var(--card-shadow);
113
+ }
114
+
115
+ .solid_queue_monitor .section-header-left {
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 1rem;
119
+ }
120
+
121
+ .solid_queue_monitor .section-header-right {
122
+ display: flex;
123
+ align-items: center;
124
+ gap: 0.5rem;
125
+ }
126
+
104
127
  .solid_queue_monitor .stats-container {
105
128
  margin-bottom: 2rem;
106
129
  }
@@ -1154,6 +1177,728 @@ module SolidQueueMonitor
1154
1177
  align-items: center;
1155
1178
  gap: 0.75rem;
1156
1179
  }
1180
+
1181
+ /* Workers Page Styles */
1182
+ .solid_queue_monitor .workers-summary {
1183
+ display: grid;
1184
+ grid-template-columns: repeat(4, 1fr);
1185
+ gap: 1rem;
1186
+ margin-bottom: 1.5rem;
1187
+ }
1188
+
1189
+ .solid_queue_monitor .summary-card {
1190
+ background: var(--card-background);
1191
+ border: 1px solid var(--border-color);
1192
+ border-radius: 0.5rem;
1193
+ padding: 1rem 1.25rem;
1194
+ display: flex;
1195
+ flex-direction: column;
1196
+ align-items: center;
1197
+ gap: 0.25rem;
1198
+ border-left: 4px solid var(--border-color);
1199
+ position: relative;
1200
+ }
1201
+
1202
+ .solid_queue_monitor .summary-card .summary-label {
1203
+ font-size: 0.75rem;
1204
+ text-transform: uppercase;
1205
+ letter-spacing: 0.05em;
1206
+ color: var(--text-muted);
1207
+ }
1208
+
1209
+ .solid_queue_monitor .summary-card .summary-value {
1210
+ font-size: 1.75rem;
1211
+ font-weight: 600;
1212
+ color: var(--text-color);
1213
+ }
1214
+
1215
+ .solid_queue_monitor .summary-healthy {
1216
+ border-left-color: #10b981;
1217
+ }
1218
+
1219
+ .solid_queue_monitor .summary-healthy .summary-value {
1220
+ color: #10b981;
1221
+ }
1222
+
1223
+ .solid_queue_monitor .summary-stale {
1224
+ border-left-color: #f59e0b;
1225
+ }
1226
+
1227
+ .solid_queue_monitor .summary-stale .summary-value {
1228
+ color: #f59e0b;
1229
+ }
1230
+
1231
+ .solid_queue_monitor .summary-dead {
1232
+ border-left-color: #ef4444;
1233
+ }
1234
+
1235
+ .solid_queue_monitor .summary-dead .summary-value {
1236
+ color: #ef4444;
1237
+ }
1238
+
1239
+ .solid_queue_monitor .summary-action {
1240
+ font-size: 0.75rem;
1241
+ color: #f59e0b;
1242
+ text-decoration: none;
1243
+ border: 1px solid #f59e0b;
1244
+ padding: 0.25rem 0.5rem;
1245
+ border-radius: 0.25rem;
1246
+ margin-top: 0.5rem;
1247
+ transition: all 0.2s;
1248
+ }
1249
+
1250
+ .solid_queue_monitor .summary-action:hover {
1251
+ background: #f59e0b;
1252
+ color: #000;
1253
+ }
1254
+
1255
+ .solid_queue_monitor .kind-badge {
1256
+ display: inline-block;
1257
+ padding: 0.25rem 0.5rem;
1258
+ border-radius: 0.25rem;
1259
+ font-size: 0.75rem;
1260
+ font-weight: 500;
1261
+ }
1262
+
1263
+ .solid_queue_monitor .kind-worker {
1264
+ background: rgba(59, 130, 246, 0.15);
1265
+ color: #3b82f6;
1266
+ }
1267
+
1268
+ .solid_queue_monitor .kind-dispatcher {
1269
+ background: rgba(249, 115, 22, 0.15);
1270
+ color: #f97316;
1271
+ }
1272
+
1273
+ .solid_queue_monitor .kind-scheduler {
1274
+ background: rgba(168, 85, 247, 0.15);
1275
+ color: #a855f7;
1276
+ }
1277
+
1278
+ .solid_queue_monitor .kind-other {
1279
+ background: rgba(107, 114, 128, 0.15);
1280
+ color: #6b7280;
1281
+ }
1282
+
1283
+ .solid_queue_monitor .status-healthy {
1284
+ background: rgba(16, 185, 129, 0.15);
1285
+ color: #10b981;
1286
+ }
1287
+
1288
+ .solid_queue_monitor .status-stale {
1289
+ background: rgba(245, 158, 11, 0.15);
1290
+ color: #f59e0b;
1291
+ }
1292
+
1293
+ .solid_queue_monitor .status-dead {
1294
+ background: rgba(239, 68, 68, 0.15);
1295
+ color: #ef4444;
1296
+ }
1297
+
1298
+ .solid_queue_monitor .queue-tag {
1299
+ display: inline-block;
1300
+ background: var(--card-background);
1301
+ border: 1px solid var(--border-color);
1302
+ padding: 0.125rem 0.375rem;
1303
+ border-radius: 0.25rem;
1304
+ font-size: 0.75rem;
1305
+ margin-right: 0.25rem;
1306
+ }
1307
+
1308
+ .solid_queue_monitor .queue-more {
1309
+ color: var(--text-muted);
1310
+ font-size: 0.75rem;
1311
+ }
1312
+
1313
+ .solid_queue_monitor .jobs-idle {
1314
+ color: var(--text-muted);
1315
+ font-style: italic;
1316
+ }
1317
+
1318
+ .solid_queue_monitor .jobs-processing {
1319
+ color: #10b981;
1320
+ }
1321
+
1322
+ .solid_queue_monitor .jobs-processing .job-names {
1323
+ color: var(--text-muted);
1324
+ font-size: 0.8em;
1325
+ }
1326
+
1327
+ .solid_queue_monitor .worker-dead {
1328
+ background: rgba(239, 68, 68, 0.05);
1329
+ }
1330
+
1331
+ .solid_queue_monitor .worker-stale {
1332
+ background: rgba(245, 158, 11, 0.05);
1333
+ }
1334
+
1335
+ .solid_queue_monitor .action-placeholder {
1336
+ color: var(--text-muted);
1337
+ }
1338
+
1339
+ /* Table Link Styles */
1340
+ .solid_queue_monitor .job-class-link {
1341
+ color: var(--text-color);
1342
+ text-decoration: none;
1343
+ transition: color 0.2s;
1344
+ }
1345
+
1346
+ .solid_queue_monitor .job-class-link:hover {
1347
+ color: #3b82f6;
1348
+ text-decoration: underline;
1349
+ }
1350
+
1351
+ .solid_queue_monitor .queue-link {
1352
+ color: var(--text-color);
1353
+ text-decoration: none;
1354
+ transition: color 0.2s;
1355
+ }
1356
+
1357
+ .solid_queue_monitor .queue-link:hover {
1358
+ color: #3b82f6;
1359
+ text-decoration: underline;
1360
+ }
1361
+
1362
+ .solid_queue_monitor .back-link {
1363
+ color: var(--text-muted);
1364
+ text-decoration: none;
1365
+ display: inline-flex;
1366
+ align-items: center;
1367
+ gap: 0.25rem;
1368
+ font-size: 0.875rem;
1369
+ transition: color 0.2s;
1370
+ }
1371
+
1372
+ .solid_queue_monitor .back-link:hover {
1373
+ color: var(--text-color);
1374
+ }
1375
+
1376
+ .solid_queue_monitor .job-back-link {
1377
+ margin-bottom: 1rem;
1378
+ }
1379
+
1380
+ .solid_queue_monitor .empty-state {
1381
+ text-align: center;
1382
+ padding: 3rem 1rem;
1383
+ color: var(--text-muted);
1384
+ }
1385
+
1386
+ .solid_queue_monitor .empty-state p {
1387
+ margin: 0.5rem 0;
1388
+ }
1389
+
1390
+ .solid_queue_monitor .empty-state-hint {
1391
+ font-size: 0.875rem;
1392
+ opacity: 0.7;
1393
+ }
1394
+
1395
+ /* Job Details Page Styles */
1396
+ .solid_queue_monitor .job-details-page {
1397
+ width: 100%;
1398
+ }
1399
+
1400
+ .solid_queue_monitor .job-header {
1401
+ background: var(--card-background);
1402
+ border-radius: 0.5rem;
1403
+ padding: 1.5rem;
1404
+ margin-bottom: 1.5rem;
1405
+ box-shadow: var(--card-shadow);
1406
+ }
1407
+
1408
+ .solid_queue_monitor .job-header-main {
1409
+ display: flex;
1410
+ align-items: center;
1411
+ gap: 1rem;
1412
+ margin-bottom: 0.75rem;
1413
+ flex-wrap: wrap;
1414
+ }
1415
+
1416
+ .solid_queue_monitor .job-title {
1417
+ font-size: 1.5rem;
1418
+ font-weight: 600;
1419
+ color: var(--text-color);
1420
+ margin: 0;
1421
+ }
1422
+
1423
+ .solid_queue_monitor .job-status-badge {
1424
+ padding: 0.375rem 0.75rem;
1425
+ border-radius: 9999px;
1426
+ font-size: 0.75rem;
1427
+ font-weight: 600;
1428
+ text-transform: uppercase;
1429
+ letter-spacing: 0.05em;
1430
+ }
1431
+
1432
+ .solid_queue_monitor .job-header-meta {
1433
+ display: flex;
1434
+ align-items: center;
1435
+ gap: 0.5rem;
1436
+ color: var(--text-muted);
1437
+ font-size: 0.875rem;
1438
+ flex-wrap: wrap;
1439
+ }
1440
+
1441
+ .solid_queue_monitor .job-separator {
1442
+ color: var(--border-color);
1443
+ }
1444
+
1445
+ .solid_queue_monitor .job-actions {
1446
+ display: flex;
1447
+ gap: 0.5rem;
1448
+ margin-top: 1rem;
1449
+ }
1450
+
1451
+ .solid_queue_monitor .job-section {
1452
+ background: var(--card-background);
1453
+ border-radius: 0.5rem;
1454
+ padding: 1.25rem;
1455
+ margin-bottom: 1rem;
1456
+ box-shadow: var(--card-shadow);
1457
+ }
1458
+
1459
+ .solid_queue_monitor .job-section .section-header {
1460
+ display: flex;
1461
+ justify-content: space-between;
1462
+ align-items: center;
1463
+ margin-bottom: 1rem;
1464
+ }
1465
+
1466
+ .solid_queue_monitor .job-section .section-title {
1467
+ font-size: 1rem;
1468
+ font-weight: 600;
1469
+ color: var(--text-color);
1470
+ margin: 0;
1471
+ }
1472
+
1473
+ .solid_queue_monitor .section-subtitle {
1474
+ color: var(--text-muted);
1475
+ font-size: 0.875rem;
1476
+ }
1477
+
1478
+ /* Timing Cards */
1479
+ .solid_queue_monitor .timing-cards {
1480
+ display: grid;
1481
+ grid-template-columns: repeat(3, 1fr);
1482
+ gap: 1rem;
1483
+ margin-bottom: 1.5rem;
1484
+ }
1485
+
1486
+ .solid_queue_monitor .timing-card {
1487
+ background: var(--card-background);
1488
+ border-radius: 0.5rem;
1489
+ padding: 1.25rem;
1490
+ text-align: center;
1491
+ box-shadow: var(--card-shadow);
1492
+ border: 1px solid var(--border-color);
1493
+ }
1494
+
1495
+ .solid_queue_monitor .timing-value {
1496
+ font-size: 1.5rem;
1497
+ font-weight: 700;
1498
+ color: var(--text-color);
1499
+ margin-bottom: 0.25rem;
1500
+ }
1501
+
1502
+ .solid_queue_monitor .timing-label {
1503
+ font-size: 0.75rem;
1504
+ color: var(--text-muted);
1505
+ text-transform: uppercase;
1506
+ letter-spacing: 0.05em;
1507
+ }
1508
+
1509
+ .solid_queue_monitor .timing-indicator {
1510
+ display: inline-block;
1511
+ padding: 0.125rem 0.5rem;
1512
+ border-radius: 9999px;
1513
+ font-size: 0.625rem;
1514
+ font-weight: 600;
1515
+ text-transform: uppercase;
1516
+ margin-top: 0.5rem;
1517
+ }
1518
+
1519
+ .solid_queue_monitor .indicator-good {
1520
+ background: rgba(16, 185, 129, 0.15);
1521
+ color: #10b981;
1522
+ }
1523
+
1524
+ .solid_queue_monitor .indicator-normal {
1525
+ background: rgba(59, 130, 246, 0.15);
1526
+ color: #3b82f6;
1527
+ }
1528
+
1529
+ .solid_queue_monitor .indicator-warning {
1530
+ background: rgba(245, 158, 11, 0.15);
1531
+ color: #f59e0b;
1532
+ }
1533
+
1534
+ /* Timeline */
1535
+ .solid_queue_monitor .job-timeline {
1536
+ padding: 0.5rem 0;
1537
+ }
1538
+
1539
+ .solid_queue_monitor .timeline-track {
1540
+ display: flex;
1541
+ justify-content: space-between;
1542
+ position: relative;
1543
+ }
1544
+
1545
+ .solid_queue_monitor .timeline-event {
1546
+ display: flex;
1547
+ flex-direction: column;
1548
+ align-items: center;
1549
+ position: relative;
1550
+ flex: 1;
1551
+ }
1552
+
1553
+ .solid_queue_monitor .timeline-dot {
1554
+ width: 12px;
1555
+ height: 12px;
1556
+ border-radius: 50%;
1557
+ background: var(--border-color);
1558
+ border: 2px solid var(--card-background);
1559
+ z-index: 1;
1560
+ }
1561
+
1562
+ .solid_queue_monitor .timeline-line {
1563
+ position: absolute;
1564
+ top: 5px;
1565
+ left: calc(50% + 6px);
1566
+ right: calc(-50% + 6px);
1567
+ height: 2px;
1568
+ background: var(--border-color);
1569
+ }
1570
+
1571
+ .solid_queue_monitor .timeline-content {
1572
+ text-align: center;
1573
+ margin-top: 0.5rem;
1574
+ }
1575
+
1576
+ .solid_queue_monitor .timeline-label {
1577
+ font-size: 0.75rem;
1578
+ font-weight: 600;
1579
+ color: var(--text-color);
1580
+ }
1581
+
1582
+ .solid_queue_monitor .timeline-time {
1583
+ font-size: 0.625rem;
1584
+ color: var(--text-muted);
1585
+ margin-top: 0.125rem;
1586
+ }
1587
+
1588
+ .solid_queue_monitor .timeline-done .timeline-dot {
1589
+ background: #10b981;
1590
+ }
1591
+
1592
+ .solid_queue_monitor .timeline-done .timeline-line {
1593
+ background: #10b981;
1594
+ }
1595
+
1596
+ .solid_queue_monitor .timeline-success .timeline-dot {
1597
+ background: #10b981;
1598
+ box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
1599
+ }
1600
+
1601
+ .solid_queue_monitor .timeline-failed .timeline-dot {
1602
+ background: #ef4444;
1603
+ box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
1604
+ }
1605
+
1606
+ .solid_queue_monitor .timeline-active .timeline-dot {
1607
+ background: #3b82f6;
1608
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
1609
+ animation: pulse 2s infinite;
1610
+ }
1611
+
1612
+ @keyframes pulse {
1613
+ 0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
1614
+ 50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1); }
1615
+ }
1616
+
1617
+ /* Error Section */
1618
+ .solid_queue_monitor .error-section {
1619
+ border-left: 4px solid #ef4444;
1620
+ }
1621
+
1622
+ .solid_queue_monitor .error-type {
1623
+ font-size: 1rem;
1624
+ font-weight: 600;
1625
+ color: #ef4444;
1626
+ margin-bottom: 0.5rem;
1627
+ }
1628
+
1629
+ .solid_queue_monitor .error-message-box {
1630
+ background: rgba(239, 68, 68, 0.1);
1631
+ border-radius: 0.375rem;
1632
+ padding: 0.75rem 1rem;
1633
+ color: var(--text-color);
1634
+ font-size: 0.875rem;
1635
+ line-height: 1.5;
1636
+ }
1637
+
1638
+ /* Backtrace */
1639
+ .solid_queue_monitor .backtrace-section {
1640
+ margin-top: 1rem;
1641
+ }
1642
+
1643
+ .solid_queue_monitor .backtrace-header {
1644
+ display: flex;
1645
+ justify-content: space-between;
1646
+ align-items: center;
1647
+ margin-bottom: 0.5rem;
1648
+ }
1649
+
1650
+ .solid_queue_monitor .backtrace-title {
1651
+ font-size: 0.75rem;
1652
+ font-weight: 600;
1653
+ color: var(--text-muted);
1654
+ text-transform: uppercase;
1655
+ letter-spacing: 0.05em;
1656
+ }
1657
+
1658
+ .solid_queue_monitor .backtrace-toggle {
1659
+ display: flex;
1660
+ gap: 0.25rem;
1661
+ }
1662
+
1663
+ .solid_queue_monitor .toggle-btn {
1664
+ padding: 0.25rem 0.5rem;
1665
+ font-size: 0.625rem;
1666
+ border: 1px solid var(--border-color);
1667
+ background: transparent;
1668
+ color: var(--text-muted);
1669
+ border-radius: 0.25rem;
1670
+ cursor: pointer;
1671
+ transition: all 0.2s;
1672
+ }
1673
+
1674
+ .solid_queue_monitor .toggle-btn:hover {
1675
+ border-color: var(--text-muted);
1676
+ }
1677
+
1678
+ .solid_queue_monitor .toggle-btn.active {
1679
+ background: var(--primary-color);
1680
+ border-color: var(--primary-color);
1681
+ color: white;
1682
+ }
1683
+
1684
+ .solid_queue_monitor .backtrace-content {
1685
+ background: var(--code-background);
1686
+ border-radius: 0.375rem;
1687
+ padding: 0.75rem;
1688
+ font-size: 0.75rem;
1689
+ line-height: 1.6;
1690
+ overflow-x: auto;
1691
+ margin: 0;
1692
+ max-height: 300px;
1693
+ overflow-y: auto;
1694
+ }
1695
+
1696
+ .solid_queue_monitor .backtrace-line {
1697
+ display: block;
1698
+ color: var(--text-color);
1699
+ }
1700
+
1701
+ .solid_queue_monitor .backtrace-line .line-number {
1702
+ color: var(--text-muted);
1703
+ margin-right: 0.5rem;
1704
+ user-select: none;
1705
+ }
1706
+
1707
+ /* Details Grid */
1708
+ .solid_queue_monitor .details-grid {
1709
+ display: grid;
1710
+ gap: 0.75rem;
1711
+ }
1712
+
1713
+ .solid_queue_monitor .detail-row {
1714
+ display: flex;
1715
+ justify-content: space-between;
1716
+ align-items: center;
1717
+ padding: 0.5rem 0;
1718
+ border-bottom: 1px solid var(--border-color);
1719
+ }
1720
+
1721
+ .solid_queue_monitor .detail-row:last-child {
1722
+ border-bottom: none;
1723
+ }
1724
+
1725
+ .solid_queue_monitor .detail-label {
1726
+ font-size: 0.875rem;
1727
+ color: var(--text-muted);
1728
+ }
1729
+
1730
+ .solid_queue_monitor .detail-value {
1731
+ font-size: 0.875rem;
1732
+ color: var(--text-color);
1733
+ text-align: right;
1734
+ }
1735
+
1736
+ .solid_queue_monitor .detail-mono {
1737
+ font-family: ui-monospace, monospace;
1738
+ font-size: 0.8rem;
1739
+ }
1740
+
1741
+ /* Arguments Content */
1742
+ .solid_queue_monitor .arguments-content {
1743
+ background: var(--code-background);
1744
+ border-radius: 0.375rem;
1745
+ padding: 1rem;
1746
+ font-size: 0.8rem;
1747
+ line-height: 1.5;
1748
+ overflow-x: auto;
1749
+ margin: 0;
1750
+ font-family: ui-monospace, monospace;
1751
+ }
1752
+
1753
+ /* Copy Button */
1754
+ .solid_queue_monitor .copy-button {
1755
+ display: inline-flex;
1756
+ align-items: center;
1757
+ gap: 0.25rem;
1758
+ padding: 0.375rem 0.625rem;
1759
+ font-size: 0.75rem;
1760
+ color: var(--text-muted);
1761
+ background: transparent;
1762
+ border: 1px solid var(--border-color);
1763
+ border-radius: 0.25rem;
1764
+ cursor: pointer;
1765
+ transition: all 0.2s;
1766
+ }
1767
+
1768
+ .solid_queue_monitor .copy-button:hover {
1769
+ color: var(--text-color);
1770
+ border-color: var(--text-muted);
1771
+ }
1772
+
1773
+ /* Collapsible Section */
1774
+ .solid_queue_monitor .collapsible-header {
1775
+ cursor: pointer;
1776
+ user-select: none;
1777
+ }
1778
+
1779
+ .solid_queue_monitor .collapsible-title {
1780
+ display: flex;
1781
+ align-items: center;
1782
+ gap: 0.5rem;
1783
+ }
1784
+
1785
+ .solid_queue_monitor .collapse-icon {
1786
+ transition: transform 0.2s;
1787
+ color: var(--text-muted);
1788
+ }
1789
+
1790
+ .solid_queue_monitor .collapsible-content {
1791
+ margin-top: 1rem;
1792
+ }
1793
+
1794
+ .solid_queue_monitor .raw-data-content {
1795
+ background: var(--code-background);
1796
+ border-radius: 0.375rem;
1797
+ padding: 1rem;
1798
+ font-size: 0.75rem;
1799
+ line-height: 1.5;
1800
+ overflow-x: auto;
1801
+ margin: 0;
1802
+ font-family: ui-monospace, monospace;
1803
+ max-height: 400px;
1804
+ overflow-y: auto;
1805
+ }
1806
+
1807
+ /* Recent Executions Table */
1808
+ .solid_queue_monitor .recent-executions-table {
1809
+ width: 100%;
1810
+ }
1811
+
1812
+ .solid_queue_monitor .mini-status-badge {
1813
+ display: inline-block;
1814
+ padding: 0.125rem 0.375rem;
1815
+ border-radius: 0.25rem;
1816
+ font-size: 0.625rem;
1817
+ font-weight: 600;
1818
+ text-transform: uppercase;
1819
+ }
1820
+
1821
+ .solid_queue_monitor .args-preview {
1822
+ max-width: 200px;
1823
+ overflow: hidden;
1824
+ text-overflow: ellipsis;
1825
+ white-space: nowrap;
1826
+ }
1827
+
1828
+ .solid_queue_monitor .args-preview a {
1829
+ color: var(--text-color);
1830
+ text-decoration: none;
1831
+ }
1832
+
1833
+ .solid_queue_monitor .args-preview a:hover {
1834
+ color: #3b82f6;
1835
+ text-decoration: underline;
1836
+ }
1837
+
1838
+ /* Queue Badge in Job Details */
1839
+ .solid_queue_monitor .queue-badge {
1840
+ display: inline-block;
1841
+ padding: 0.25rem 0.5rem;
1842
+ background: var(--code-background);
1843
+ border-radius: 0.25rem;
1844
+ font-size: 0.875rem;
1845
+ color: var(--text-color);
1846
+ text-decoration: none;
1847
+ }
1848
+
1849
+ .solid_queue_monitor .queue-badge:hover {
1850
+ color: #3b82f6;
1851
+ }
1852
+
1853
+ @media (max-width: 768px) {
1854
+ .solid_queue_monitor .timing-cards {
1855
+ grid-template-columns: 1fr;
1856
+ }
1857
+
1858
+ .solid_queue_monitor .timeline-track {
1859
+ flex-direction: column;
1860
+ gap: 1rem;
1861
+ }
1862
+
1863
+ .solid_queue_monitor .timeline-line {
1864
+ display: none;
1865
+ }
1866
+
1867
+ .solid_queue_monitor .timeline-event {
1868
+ flex-direction: row;
1869
+ gap: 1rem;
1870
+ }
1871
+
1872
+ .solid_queue_monitor .timeline-content {
1873
+ text-align: left;
1874
+ margin-top: 0;
1875
+ }
1876
+
1877
+ .solid_queue_monitor .detail-row {
1878
+ flex-direction: column;
1879
+ align-items: flex-start;
1880
+ gap: 0.25rem;
1881
+ }
1882
+
1883
+ .solid_queue_monitor .detail-value {
1884
+ text-align: left;
1885
+ }
1886
+
1887
+ .solid_queue_monitor .job-header-main {
1888
+ flex-direction: column;
1889
+ align-items: flex-start;
1890
+ }
1891
+
1892
+ .solid_queue_monitor .workers-summary {
1893
+ grid-template-columns: repeat(2, 1fr);
1894
+ }
1895
+ }
1896
+
1897
+ @media (max-width: 480px) {
1898
+ .solid_queue_monitor .workers-summary {
1899
+ grid-template-columns: 1fr;
1900
+ }
1901
+ }
1157
1902
  CSS
1158
1903
  end
1159
1904
  end