fix: 使用响应式 Grid 展示 Alpha 详情并独立排列 JSON 分组

frontend/src/style.css

@@ -919,20 +919,61 @@ label:not(.semi-checkbox):not(.semi-radio) {
 .alpha-detail .semi-divider-horizontal {
   margin: 16px 0;
 }
-.alpha-detail .semi-descriptions table {
-  table-layout: fixed;
-  width: 100%;
+/* Container queries follow the available drawer width, including chat offsets. */
+.detail-field-container {
+  container-type: inline-size;
+  min-width: 0;
 }
-.alpha-detail .semi-descriptions th,
-.alpha-detail .semi-descriptions td {
-  padding-bottom: 6px;
-  vertical-align: top;
-  overflow-wrap: anywhere;
+.detail-field-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 24px;
+  margin: 0;
+  padding: 0;
   text-align: left;
 }
-.alpha-detail .nested-descriptions {
-  margin-bottom: 0;
+.detail-field {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  align-items: start;
+  gap: 12px;
+  min-width: 0;
 }
-.alpha-detail .nested-descriptions th {
-  width: 45%;
+.detail-field-grid dt,
+.detail-field-grid dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: left;
+}
+.detail-field > dt {
+  color: var(--muted);
+}
+.detail-field-group {
+  grid-column: 1 / -1;
+  min-width: 0;
+  border-top: 1px solid var(--line);
+  padding-top: 12px;
+  margin-top: 4px;
+}
+.detail-field-group > dt {
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: var(--ink);
+}
+.detail-field-group .detail-field-group {
+  border-left: 2px solid var(--line);
+  padding-left: 12px;
+}
+@container (max-width: 760px) {
+  .detail-field-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@container (max-width: 480px) {
+  .detail-field-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }