pytorrent/static/styles.css

@@ -4660,32 +4660,70 @@ body,
 }
 
 .operation-log-table {
-  min-width: 1080px;
+  min-width: 820px;
+  table-layout: fixed;
   white-space: normal;
 }
 
+.operation-log-table th,
 .operation-log-table td {
+  overflow-wrap: anywhere;
   vertical-align: top;
 }
 
-.operation-log-table td:nth-child(5),
+.operation-log-col-time {
-.operation-log-table td:nth-child(6),
+  width: 9.5rem;
-.operation-log-table td:nth-child(7) {
+}
-  max-width: 24rem;
+
-  overflow-wrap: anywhere;
+.operation-log-col-type {
+  width: 8rem;
+}
+
+.operation-log-col-source,
+.operation-log-col-action {
+  width: 5.5rem;
+}
+
+.operation-log-col-torrent {
+  width: 17rem;
+}
+
+.operation-log-col-message {
+  width: auto;
+}
+
+.operation-log-details-row > td {
+  background: var(--bs-tertiary-bg);
+  border-top: 0;
+  padding: 0.45rem 0.75rem 0.75rem;
+}
+
+.operation-log-details-panel {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.operation-log-details-title {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 
 .operation-log-details {
   display: grid;
-  gap: 0.35rem;
+  gap: 0.45rem;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   margin: 0;
-  min-width: 18rem;
+  min-width: 0;
 }
 
 .operation-log-details div {
-  background: var(--bs-tertiary-bg);
+  background: var(--bs-body-bg);
   border: 1px solid var(--bs-border-color-translucent);
   border-radius: 0.5rem;
+  min-width: 0;
   padding: 0.35rem 0.45rem;
 }