fix logs sections

pytorrent/static/styles.css

@@ -4563,10 +4563,10 @@ body,
 .operation-log-toolbar-main,
 .operation-log-settings-grid,
 .operation-log-view-settings {
+  align-items: flex-end;
   display: flex;
   flex-wrap: wrap;
-  gap: .5rem;
-  align-items: end;
+  gap: 0.5rem;
 }
 
 .operation-log-toolbar {
@@ -4578,10 +4578,21 @@ body,
 }
 
 .operation-log-toolbar-toggle {
+  align-items: center;
+  display: flex;
   flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: 0.75rem;
   margin-left: auto;
 }
 
+.operation-log-hide-jobs,
+.operation-log-show-details {
+  align-items: center;
+  margin-bottom: 0;
+  min-height: 31px;
+}
+
 .operation-log-view-settings {
   align-items: center;
 }
@@ -4603,29 +4614,24 @@ body,
   max-width: 260px;
 }
 
-.operation-log-hide-jobs {
-  align-items: center;
-  min-height: 31px;
-}
-
 .operation-log-settings-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: .5rem;
+  gap: 0.5rem;
 }
 
 .operation-log-stats-grid {
   display: grid;
+  gap: 0.75rem;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-  gap: .75rem;
 }
 
 .operation-log-stat,
 .operation-log-panels section {
-  border: 1px solid var(--bs-border-color);
-  border-radius: .75rem;
-  padding: .75rem;
   background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  padding: 0.75rem;
 }
 
 .operation-log-stat span {
@@ -4636,47 +4642,63 @@ body,
 
 .operation-log-panels {
   display: grid;
+  gap: 0.75rem;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: .75rem;
-  margin-top: .75rem;
+  margin-top: 0.75rem;
 }
 
 .operation-log-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: .25rem 0;
   border-bottom: 1px solid var(--bs-border-color-translucent);
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 0.25rem 0;
 }
 
 .operation-log-row:last-child {
   border-bottom: 0;
 }
 
+.operation-log-table {
+  min-width: 1080px;
+  white-space: normal;
+}
+
 .operation-log-table td {
   vertical-align: top;
 }
 
-.operation-log-details {
+.operation-log-table td:nth-child(5),
+.operation-log-table td:nth-child(6),
+.operation-log-table td:nth-child(7) {
   max-width: 24rem;
-}
-
-.operation-log-details summary {
-  cursor: pointer;
   overflow-wrap: anywhere;
 }
 
-.operation-log-details pre {
+.operation-log-details {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0;
+  min-width: 18rem;
+}
+
+.operation-log-details div {
   background: var(--bs-tertiary-bg);
-  border: 1px solid var(--bs-border-color);
-  border-radius: .5rem;
-  color: var(--bs-body-color);
-  font-size: .75rem;
-  margin: .5rem 0 0;
-  max-height: 18rem;
-  overflow: auto;
-  padding: .65rem;
-  white-space: pre-wrap;
+  border: 1px solid var(--bs-border-color-translucent);
+  border-radius: 0.5rem;
+  padding: 0.35rem 0.45rem;
+}
+
+.operation-log-details dt {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.operation-log-details dd {
+  margin: 0.1rem 0 0;
+  overflow-wrap: anywhere;
 }
 
 @media (max-width: 760px) {
@@ -4688,12 +4710,14 @@ body,
 
   .operation-log-toolbar,
   .operation-log-toolbar-main,
+  .operation-log-toolbar-toggle,
   .operation-log-view-settings {
     align-items: stretch;
     flex-direction: column;
   }
 
   .operation-log-toolbar-toggle {
+    gap: 0.35rem;
     margin-left: 0;
   }