style(Viewer): refine layout and alignment in log viewer components

- Centered alignment for row pins and severity indicators in the CSS for improved visual consistency.
- Adjusted height calculations in LogList.vue to enhance the display of log records, ensuring better spacing and readability.
- Introduced a new function to determine pin block height based on record content, optimizing layout for expanded log entries.

Author: BAKAOLC

Viewer/src/components/LogList.vue

@@ -136,26 +136,34 @@ function estimateRecordHeight(record: LogRecord) {
   if (record.body.includes("\n") || record.body.length > 160) {
     const lineCount = record.body.split("\n").length;
     const wrappedLines = Math.floor(record.body.length / 180);
-    return Math.min(220, 38 + Math.max(lineCount - 1, wrappedLines) * 18);
+    return Math.min(220, 34 + Math.max(lineCount - 1, wrappedLines) * 18);
   }
 
-  return 36;
+  return 34;
 }
 
 function measureVirtualElement(element: Element | ComponentPublicInstance | null) {
   if (element instanceof Element)
     rowVirtualizer.value.measureElement(element);
 }
 
-function pinOffset(item: { start: number; size: number }) {
+function pinOffset(item: { start: number; size: number }, record: LogRecord) {
   if (compact.value)
     return 0;
 
   const distancePastTop = scrollTop.value - item.start;
   if (distancePastTop <= 0)
     return 0;
 
-  return Math.min(distancePastTop, Math.max(0, item.size - 34));
+  return Math.min(distancePastTop, Math.max(0, item.size - pinBlockHeight(record)));
+}
+
+function pinBlockHeight(record: LogRecord) {
+  return originSubtitle(record) ? 33 : 34;
+}
+
+function isExpandedRecord(record: LogRecord) {
+  return !compact.value && (record.body.includes("\n") || record.body.length > 160);
 }
 
 function formatTime(timestamp: string) {
@@ -218,13 +226,14 @@ function segmentStyle(segment: MessageSegment) {
                 record.severityText,
                 {
                   compact,
+                  expanded: isExpandedRecord(record),
                   entering: enteringKeys.has(recordKey(record)),
                   focused: selectedRecord ? recordKey(selectedRecord) === recordKey(record) : false,
                   selected: selectedIds.has(recordKey(record))
                 }
               ]"
               :data-index="item.index"
-              :style="{gridTemplateColumns: gridTemplate, '--row-y': `${item.start}px`, '--pin-y': `${pinOffset(item)}px`}"
+              :style="{gridTemplateColumns: gridTemplate, '--row-y': `${item.start}px`, '--pin-y': `${pinOffset(item, record)}px`}"
               @click="emit('row-click', record, $event)"
               @dblclick="emit('open-payload', record)"
           >

Viewer/src/styles.css

@@ -626,13 +626,30 @@ pre::-webkit-scrollbar-thumb:hover {
 }
 
 .row-pin {
-    align-self: start;
+    align-self: center;
     position: relative;
     z-index: 1;
-    margin-top: 3px;
     transform: translateY(var(--pin-y, 0));
 }
 
+.message {
+    align-self: center;
+}
+
+.log-row.expanded .row-pin {
+    align-self: start;
+    transform: translateY(calc(var(--pin-y, 0px) + 3px));
+}
+
+.log-row.expanded .origin.row-pin {
+    transform: translateY(var(--pin-y, 0px));
+}
+
+.log-row.expanded .message {
+    align-self: start;
+    padding-top: 4px;
+}
+
 .id.row-pin,
 .time.row-pin {
     display: inline-flex;
@@ -641,11 +658,11 @@ pre::-webkit-scrollbar-thumb:hover {
 }
 
 .origin.row-pin {
-    margin-top: 0;
+    align-self: center;
 }
 
 .severity.row-pin {
-    margin-top: 2px;
+    align-self: center;
 }
 
 .log-row.entering {