PLI list: vertical layout, full descriptions, wider inputs, row separators

- Drop truncation: full qualifier descriptions (wrap)
- Raw hex input moves under the description, fills row width (flex-1)
- Subtle bottom-border separator between qualifiers

frontend/index.html

@@ -4403,17 +4403,17 @@ async function pysimPliRender() {
 		PLI_QUALIFIERS.forEach(q => {
 			const val = data[q.code] || '';
 			const hasCodec = !!PLI_CODECS[q.code];
-			html += '<div data-pli-row="' + q.code + '">'
+			html += '<div data-pli-row="' + q.code + '" class="py-0.5 border-b border-gray-200 dark:border-slate-700">'
-				+ '<div class="flex items-center gap-1">'
+				+ '<div class="flex items-baseline gap-1.5">'
-				+ '<span class="w-6 text-right text-gray-400 text-[10px]">' + q.code + '</span>'
+				+ '<span class="w-6 shrink-0 text-right text-gray-400 text-[10px]">' + q.code + '</span>'
-				+ '<span class="w-32 truncate text-[10px]" title="' + esc(q.name) + '">' + esc(q.name) + '</span>'
+				+ '<span class="flex-1 min-w-0 text-[11px] leading-snug">' + esc(q.name) + '</span>'
+				+ '</div>'
+				+ '<div class="flex items-center gap-1 mt-0.5 ml-8">'
 				+ '<input type="text" id="pli-v-' + q.code + '" value="' + esc(val) + '" placeholder="hex"'
-				+ ' class="w-28 border border-gray-300 dark:border-slate-600 text-[10px] rounded px-1 py-0.5 dark:bg-slate-800 font-mono">';
+				+ ' class="flex-1 min-w-0 border border-gray-300 dark:border-slate-600 text-[10px] rounded px-1 py-0.5 dark:bg-slate-800 font-mono">';
 			if (hasCodec) {
 				html += '<span onclick="pysimPliDecodeRow(\'' + q.code + '\')" id="pli-tog-' + q.code + '"'
 					+ ' class="cursor-pointer select-none text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">▶</span>';
-			} else {
-				html += '<span class="w-4"></span>';
 			}
 			html += '</div><div class="pli-decode-panel hidden mt-1 ml-8 pl-2 border-l border-gray-300 dark:border-slate-600" data-pli-panel="' + q.code + '"></div></div>';
 		});

frontend/style.css

@@ -664,6 +664,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -760,10 +764,6 @@ video {
   width: 6rem;
 }
 
-.w-28 {
-  width: 7rem;
-}
-
 .w-32 {
   width: 8rem;
 }
@@ -772,8 +772,8 @@ video {
   width: 9rem;
 }
 
-.w-4 {
+.w-40 {
-  width: 1rem;
+  width: 10rem;
 }
 
 .w-48 {
@@ -882,6 +882,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -898,6 +902,10 @@ video {
   gap: 0.25rem;
 }
 
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1244,6 +1252,10 @@ video {
   font-size: 10px;
 }
 
+.text-\[11px\] {
+  font-size: 11px;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1288,6 +1300,10 @@ video {
   line-height: 1.625;
 }
 
+.leading-snug {
+  line-height: 1.375;
+}
+
 .text-amber-600 {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));