Grid - Item-Details hide row if using smaller than default row-height

Flow
1

Hello,

I have a Grid which is styled by @CssImport to have a smaller row-height.
My issue:
If I add an ItemDetailsRenderer, the details once shown are hiding the row they belong to (doesn’t seem to matter what kind of Renderer I use, the effect is the same with ComponentRenderer and TemplateRenderer).
If using the default row-height by removing the @CssImport, the details are right below the row where they should be.

I can’t figure out where/what I have to style to get the details in the right spot.
Can someone help?

The CSS I use to set the row-height:

vaadin-grid-cell-content {
	padding: 0 0 0 2px !important;
}

[part='cell header-cell']
 {
   height:25px; 
   min-height: 25px !important;
   border-left: 1px solid var(--_lumo-grid-selected-row-color); 
   border-right: 1px solid var(--_lumo-grid-selected-row-color);
   background-color: #fff;
   background-image: -webkit-linear-gradient(top,white 2%,#f4f4f4 98%);
   background-image: linear-gradient(to bottom,white 2%,#f4f4f4 98%);
   text-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

[part='row']
 { 
  height: 25px; 
  min-height: 25px; 
} 


[part='cell body-cell']
 {
  height:25px;
  min-height: 25px !important;
  border-left: 1px solid var(--_lumo-grid-selected-row-color); 
  border-right: 1px solid var(--_lumo-grid-selected-row-color);
} 

[part~="resize-handle"]
::before { 
  width: 15px;
}