pytorrent/static/styles.css

@@ -4693,53 +4693,69 @@ body,
 }
 
 .operation-log-details-row > td {
-  background: var(--bs-tertiary-bg);
+  background: color-mix(in srgb, var(--bs-tertiary-bg) 55%, transparent);
   border-top: 0;
-  padding: 0.45rem 0.75rem 0.75rem;
+  padding: 0.2rem 0.75rem 0.45rem;
 }
 
-.operation-log-details-panel {
-  display: grid;
-  gap: 0.35rem;
+.operation-log-details-inline {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.7rem;
+  min-width: 0;
 }
 
 .operation-log-details-title {
   color: var(--bs-secondary-color);
-  font-size: 0.72rem;
+  flex: 0 0 auto;
+  font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.02em;
+  line-height: 1.7;
   text-transform: uppercase;
 }
 
-.operation-log-details {
-  display: grid;
-  gap: 0.45rem;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  margin: 0;
+.operation-log-details-table {
+  border-collapse: collapse;
+  font-size: 0.78rem;
   min-width: 0;
+  width: 100%;
 }
 
-.operation-log-details div {
-  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;
+.operation-log-details-table th,
+.operation-log-details-table td {
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+  line-height: 1.25;
+  padding: 0.12rem 0.4rem 0.12rem 0;
+  vertical-align: top;
 }
 
-.operation-log-details dt {
+.operation-log-details-table th {
   color: var(--bs-secondary-color);
-  font-size: 0.72rem;
   font-weight: 700;
-  line-height: 1.2;
+  white-space: nowrap;
+  width: 1%;
 }
 
-.operation-log-details dd {
-  margin: 0.1rem 0 0;
+.operation-log-details-table td {
   overflow-wrap: anywhere;
 }
 
+.operation-log-details-table tr:last-child th,
+.operation-log-details-table tr:last-child td {
+  border-bottom: 0;
+}
+
 @media (max-width: 760px) {
+  .operation-log-details-inline {
+    display: block;
+  }
+
+  .operation-log-details-title {
+    display: block;
+    margin-bottom: 0.15rem;
+  }
+
   .operation-log-type-filter,
   .operation-log-search {
     max-width: none;