Fix table layout for structured args
CSS selector for .details-panel table uses "table-layout: fixed" in
order to line up more than one table in aggregation details.
However, structured args need to use "table-layout: auto" in order to
avoid using extra space for index columns. This CL adds additional
class for that.
Change-Id: I343974858849af029c024a10dffbba88631ec9c9
diff --git a/ui/src/assets/details.scss b/ui/src/assets/details.scss
index 66a295f..9420f18 100644
--- a/ui/src/assets/details.scss
+++ b/ui/src/assets/details.scss
@@ -228,6 +228,8 @@
font-size: 14px;
line-height: 18px;
width: 100%;
+ // Aggregation panel uses multiple table elements that need to be aligned,
+ // which is done by using fixed table layout.
table-layout: fixed;
word-wrap: break-word;
padding: 0px 10px;
@@ -244,6 +246,10 @@
}
}
+ .auto-layout {
+ table-layout: auto;
+ }
+
button {
background-color: #262f3c;
color: #fff;
diff --git a/ui/src/frontend/chrome_slice_panel.ts b/ui/src/frontend/chrome_slice_panel.ts
index 0a6c31f..4a62b0d 100644
--- a/ui/src/frontend/chrome_slice_panel.ts
+++ b/ui/src/frontend/chrome_slice_panel.ts
@@ -235,7 +235,7 @@
rows.push(m('tr', renderedRow));
}
- return m('table.half-width', rows);
+ return m('table.half-width.auto-layout', rows);
}
fillDescription(description: Map<string, string>, builder: TableBuilder) {
