fix(web): align subagent catalog spacing

packages/client/ui-subagent/src/client/SubagentCatalogAction.module.css

@@ -49,42 +49,43 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  width: 336px;
+  gap: 4px;
+  width: 360px;
   max-width: min(400px, calc(100vw - 32px));
-  max-height: min(560px, calc(100vh - 140px));
+  max-height: calc(100vh - 140px);
   padding: 4px;
   overflow: auto;
-  border: 1px solid var(--dsw-alias-border-l2);
+  border: 0;
   border-radius: 12px;
   background: var(--dsw-specific-menu);
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
   --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
-  box-shadow: var(--dsw-shadow-lv3);
+  box-shadow: inset 0 0 0 1px var(--dsw-alias-border-inverted), var(--dsw-shadow-lv3);
 }
 
 .node {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   min-width: 0;
 }
-.menu > .node {
-  margin-left: -8px;
-}
 
 .row {
   position: relative;
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: 4px;
   box-sizing: border-box;
   width: 100%;
-  min-height: 50px;
-  padding: 7px 8px 7px 11px;
+  min-height: 54px;
+  padding: 7px 8px 7px 4px;
   border: 0;
   border-radius: 8px;
   background: transparent;
   color: var(--dsw-alias-label-primary);
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   text-align: left;
   cursor: pointer;
   outline: none;
@@ -101,16 +102,26 @@
   flex: 1;
   align-self: stretch;
   align-items: flex-start;
-  gap: 8px;
+  gap: 6px;
   min-width: 0;
-  margin: -7px -8px -7px;
-  padding: 7px 8px;
-  border-radius: 8px;
+  border-radius: 12px;
 }
 
-.row > :global([data-state]),
 .clickarea > :global([data-state]) {
-  margin-top: 4px;
+  margin: 5px 3px 0;
+}
+
+.row:has(> .disclosure) > .clickarea,
+.row:has(> .disclosureSpace) > .clickarea {
+  padding-left: 18px;
+}
+
+.row:has(> .disclosureSpace):not(:has(> .clickarea)) {
+  padding-left: 22px;
+}
+
+.row > :global([data-state]) {
+  margin: 5px 3px 0;
 }
 
 .disabled {
@@ -128,9 +139,16 @@
 
 .disclosure,
 .disclosureSpace {
+  position: absolute;
+  top: 7px;
+  left: 4px;
   flex: none;
   width: 14px;
-  height: 18px;
+  height: 20px;
+}
+
+.disclosureSpace {
+  display: none;
 }
 
 .disclosure {
@@ -157,6 +175,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  gap: 2px;
   min-width: 0;
 }
 
@@ -169,19 +188,21 @@
 
 .label {
   color: inherit;
+  font-size: 14px;
   font-weight: 400;
+  line-height: 20px;
 }
 
 .summary,
 .metrics {
   color: var(--dsw-alias-label-tertiary);
-  font-size: 11px;
-  line-height: 16px;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .metrics {
   display: grid;
-  grid-template-rows: 18px 16px;
+  grid-template-rows: 20px 18px;
   flex: none;
   font-variant-numeric: tabular-nums;
   text-align: right;
@@ -190,7 +211,7 @@
 
 .metricToken {
   grid-row: 1;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 .metricDuration {
@@ -199,6 +220,9 @@
 
 .children {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   margin-left: 18px;
   padding-left: 4px;
 }