[ui] Do not use half-width table in the slice details panel

R=ddrone@google.com

Change-Id: I94e116d2e0cb9a3ae0a03bb690f6aea15927f82b

3 files changed, 11 insertions, 8 deletions

diff --git a/test/data/ui-screenshots/ui-chrome_rendering_desktop_select_slice_with_flows.png.sha256 b/test/data/ui-screenshots/ui-chrome_rendering_desktop_select_slice_with_flows.png.sha256
index 16097eca0..7a54ee217 100644
--- a/test/data/ui-screenshots/ui-chrome_rendering_desktop_select_slice_with_flows.png.sha256
+++ b/test/data/ui-screenshots/ui-chrome_rendering_desktop_select_slice_with_flows.png.sha256
@@ -1 +1 @@
-20a5558e8a34d88033dff9586eeb32fbd1f8d018d5f609240fa388b2388f9455
\ No newline at end of file
+c760a8e93a26add3b7af9c0b8333a546b043eb37513034cbd5f9dd3372c57010
\ No newline at end of file
diff --git a/ui/src/assets/details.scss b/ui/src/assets/details.scss
index c99031345..773bca28d 100644
--- a/ui/src/assets/details.scss
+++ b/ui/src/assets/details.scss
@@ -337,8 +337,9 @@
   color: rgb(60, 86, 136);
 }
 
-table.half-width {
+.half-width-panel {
   max-width: 50%;
+  flex-grow: 1;
 }
 
 .notes-editor-panel {
diff --git a/ui/src/frontend/chrome_slice_panel.ts b/ui/src/frontend/chrome_slice_panel.ts
index 5ca9f7cf5..387e68b1d 100644
--- a/ui/src/frontend/chrome_slice_panel.ts
+++ b/ui/src/frontend/chrome_slice_panel.ts
@@ -272,8 +272,8 @@ export class ChromeSliceDetailsPanel extends SlicePanel {
           '.details-panel',
           m('.details-panel-heading', m('h2', `Slice Details`)),
           m('.details-table-multicolumn', [
-            m('table', this.renderTable(defaultBuilder)),
-            m('table', this.renderTables(rightPanel)),
+            this.renderTable(defaultBuilder, '.half-width-panel'),
+            this.renderTables(rightPanel, '.half-width-panel'),
           ]));
     } else {
       return m(
@@ -368,16 +368,18 @@ export class ChromeSliceDetailsPanel extends SlicePanel {
     ];
   }
 
-  renderTables(builders: Map<string, TableBuilder>): m.Vnode {
+  renderTables(
+      builders: Map<string, TableBuilder>,
+      additionalClasses: string = ''): m.Vnode {
     const rows: m.Vnode[] = [];
     for (const [name, builder] of builders) {
       rows.push(m('h3', name));
       rows.push(this.renderTable(builder));
     }
-    return m('div', rows);
+    return m(`div${additionalClasses}`, rows);
   }
 
-  renderTable(builder: TableBuilder): m.Vnode {
+  renderTable(builder: TableBuilder, additionalClasses: string = ''): m.Vnode {
     const rows: m.Vnode[] = [];
     const keyColumnCount = builder.maxIndent + 1;
     for (const row of builder.rows) {
@@ -446,6 +448,6 @@ export class ChromeSliceDetailsPanel extends SlicePanel {
       rows.push(m('tr', renderedRow));
     }
 
-    return m('table.half-width.auto-layout', rows);
+    return m(`table.auto-layout${additionalClasses}`, rows);
   }
 }