Vaadin 8 - Altering the 'v-tree8-cell' height

Hey all,
I’m creating “compact” versions of Vaadin 8 TreeGrid, Grid and Tree using CSS. I’m happy with my result except for the line height of the Tree components. Below is some relevant code.

Inspecting via the browser (Chrome), the appropriate properties appear to be overridden as I expect, but the tree-cell line height continues to resolve to a standard (28px) rather than my input (24px).
To be clear the CSS .v-tree8-cell { height: 24px !important; } does not appear to do anything.

Apparently, Tree CSS is functioning differently than TreeGrid/Grid CSS, and I haven’t been able to figure out what the correct CSS would be to fix it. Likely, I am missing something obvious.

Any ideas are greatly appreciated. Thanks.

.v-tree8 {
    background-color: #fff;
  }

  .v-treegrid-tablewrapper,
  .v-grid-tablewrapper,
  .v-tree8-treewrapper {
    border: 0;
  }

  .v-treegrid-header {
     display: none;
   }

  .v-treegrid-body,
  .v-grid-body {
    margin-top: 0;
  }

  .v-treegrid-row > td,
  .v-grid-row > td,
  .v-tree8-row > td {
    border-left: none;
    border-bottom: none;
    background-color: #fff;
  }

  .v-treegrid-row-stripe > td,
  .v-grid-row-stripe > td,
  .v-tree8-row-stripe > td {
    background-color: $v-grid-row-background-color;
  }

  .v-treegrid-body .v-treegrid-cell,
  .v-grid-body .v-grid-cell,
  .v-tree8-body .v-tree8-cell {
    line-height: 24px;
    font-size: 14px;
    padding: 0 2px;
    text-overflow: ellipsis;
  }

  .v-grid-body .v-grid-cell {
    padding: 0 10px;
  }

  .v-tree8-cell {
    height: 24px !important;
  }

Hi Susan,

Based on the [Valo demo]
(https://demo.vaadin.com/valo-theme/#!trees) it seems that v-tree-node-caption sets the line-height.

You should be able to change it with the following CSS:

.v-tree-node-caption {
  line-height: ...
}