feat(web-shell): improve markdown table readability

packages/web-shell/client/components/messages/EnhancedMarkdownTable.module.css

@@ -8,6 +8,32 @@
   background: var(--card);
 }
 
+.densityCompact {
+  --table-cell-padding: 3px 6px;
+  --table-header-padding: 5px 7px;
+  --table-detail-padding: 7px 9px;
+  --table-detail-gap: 5px;
+  --table-line-height: 1.35;
+  --table-column-min-width: 72px;
+  --table-column-max-width: 240px;
+}
+
+.densityStandard {
+  --table-cell-padding: 6px 8px;
+  --table-header-padding: 7px 8px;
+  --table-detail-padding: 9px 11px;
+  --table-detail-gap: 6px;
+  --table-line-height: 1.45;
+}
+
+.densityComfortable {
+  --table-cell-padding: 8px 10px;
+  --table-header-padding: 9px 10px;
+  --table-detail-padding: 11px 13px;
+  --table-detail-gap: 8px;
+  --table-line-height: 1.55;
+}
+
 .toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -81,7 +107,7 @@
 }
 
 .table {
-  --action-column-width: 72px;
+  --action-column-width: 88px;
 
   width: max-content;
   min-width: 100%;
@@ -105,8 +131,8 @@
   position: sticky;
   top: 0;
   z-index: 3;
-  min-width: 120px;
-  max-width: 360px;
+  min-width: var(--table-column-min-width, 120px);
+  max-width: var(--table-column-max-width, 360px);
   overflow: visible;
   background: var(--card);
   color: var(--foreground);
@@ -132,7 +158,7 @@
   gap: 8px;
   align-items: center;
   justify-content: space-between;
-  padding: 7px 8px;
+  padding: var(--table-header-padding, 7px 8px);
   border: none;
   background: transparent;
   color: inherit;
@@ -256,6 +282,37 @@
   font-weight: 400;
 }
 
+.columnContextMenu {
+  position: fixed;
+  z-index: 1000;
+  width: 220px;
+  padding: 5px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--card);
+  box-shadow: 0 14px 28px rgb(0 0 0 / 30%);
+  color: var(--foreground);
+  font-size: 12px;
+}
+
+.columnContextMenuAction {
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.columnContextMenuAction:hover,
+.columnContextMenuAction:focus-visible {
+  background: var(--subtle-bg-strong);
+  outline: none;
+}
+
 .filterMenuTitle {
   padding: 9px 10px;
   border-bottom: 1px solid var(--border);
@@ -382,18 +439,41 @@
 }
 
 .cell {
-  min-width: 120px;
-  max-width: 360px;
-  padding: 6px 8px;
+  min-width: var(--table-column-min-width, 120px);
+  max-width: var(--table-column-max-width, 360px);
+  padding: var(--table-cell-padding, 6px 8px);
   background: var(--card);
   color: var(--foreground);
+  line-height: var(--table-line-height, 1.45);
   text-align: left;
   vertical-align: top;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   cursor: cell;
 }
 
+.cellContent,
+.detailValueContent {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.cellText,
+.detailValueText {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.cellContentCollapsed .cellText,
+.detailValueCollapsed .detailValueText {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
 .dragging .cell {
   user-select: none;
 }
@@ -415,6 +495,7 @@ tr:hover .selectedCell {
 
 .actionHeaderCell,
 .actionCell {
+  box-sizing: border-box;
   width: var(--action-column-width);
   min-width: var(--action-column-width);
   max-width: var(--action-column-width);
@@ -444,6 +525,13 @@ tr:hover .selectedCell {
   z-index: 4;
 }
 
+.hasFrozenColumn .frozenHeaderCell,
+.hasFrozenColumn .frozenCell {
+  box-shadow:
+    8px 0 14px -12px rgb(0 0 0 / 55%),
+    inset -1px 0 0 var(--border, rgb(255 255 255 / 18%));
+}
+
 .stickyActionHeaderCell,
 .frozenHeaderCell,
 .stickyActionCell,
@@ -479,7 +567,9 @@ tr:hover .frozenCell.selectedCell {
       color-mix(in srgb, var(--agent-blue-500) 20%, transparent)
     ),
     var(--card);
-  box-shadow: inset 0 0 0 1px var(--agent-blue-500);
+  box-shadow:
+    8px 0 14px -12px rgb(0 0 0 / 55%),
+    inset 0 0 0 1px var(--agent-blue-500);
 }
 
 .rowDetailButton {
@@ -510,8 +600,8 @@ tr:hover .frozenCell.selectedCell {
 
 .detailPanel {
   display: grid;
-  gap: 7px;
-  padding: 10px 12px;
+  gap: var(--table-detail-gap, 6px);
+  padding: var(--table-detail-padding, 9px 11px);
 }
 
 .detailTitle {
@@ -521,13 +611,17 @@ tr:hover .frozenCell.selectedCell {
 
 .detailItem {
   display: grid;
-  grid-template-columns: minmax(90px, 180px) minmax(0, 1fr);
-  gap: 10px;
+  grid-template-columns: minmax(84px, 140px) minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
 }
 
 .detailLabel {
   color: var(--muted-foreground);
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .detailValue {
@@ -537,6 +631,11 @@ tr:hover .frozenCell.selectedCell {
   white-space: pre-wrap;
 }
 
+.emptyValue {
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
 .emptyState {
   padding: 16px;
   color: var(--muted-foreground);