How to correctly change row heights

Hi,

I changed row heights but needed to do some manual work with dimensions. Could you advise on how would you approach the issue of custom row heights (depending on the image size in the first column row heights should be adjusted). Currently 2 major issues that I am having are highlighting is very off in the compact table format (`flex_highlight.png`) and classic table format is not working almost at all (`flex_classic.png`).

Here is some relevant code that I am using that works in compact format:

changestructuresize: function (size) {
        var me = this;
        me.currimgsize = size;
        me.flexview.refresh();
        me.adjustPivotContainerHeight();
},
adjustPivotContainerHeight: function () {
        var me = this;
        const numofexpanded = me.expandedRowSet.size;
        const pivotContainer = document.getElementById('pivot-container');
        const sizefactor = me.imgsizedict[me.currimgsize].height;
        const heightincrease = numofexpanded * sizefactor;
        const basePivotContainerHeight = new Set(me.currdata.map(item => item["entity id"])).size * 50 + 300;
        const totHeight = basePivotContainerHeight + heightincrease;
        pivotContainer.style.height = `${totHeight}px`;
 },

Images are shown with the help of `customizeCell` function, here is the relevant part:

        if (!(data.hierarchy && data.hierarchy.uniqueName == "structureimage") || data.measure) return;
        if (data && data.type == "header" && data.label != "") {
            let base64Img;
            cell.addClass("fm-custom-cell");
            const { height, width } = me.imgsizedict[me.currimgsize];
            const marginLeft = { "1x": "10px", "2x": "5px", "3x": "-10px" };
            const marginTop = { "1x": "-15px", "2x": "-20px", "3x": "-30px" };
            base64Img = `<div style="display:flex !important; justify-content:flex-start !important; align-items:center !important; padding:0px !important; margin:0px !important; font-size:12px; width:100% !important; max-width:100% !important;">
    <i class="fm-icon fm-collapsed-icon" title="Click to expand" style="flex-shrink:0 !important;"></i>
        <img src='data:image/png;base64, ${data.label}' style='margin-left: ${marginLeft[me.currimgsize]}; margin-top: ${marginTop[me.currimgsize]}; filter: brightness(0.97) !important; width:${height-10}px !important; max-width:${height}px !important; height: ${height-10}px !important; object-fit:contain !important;' />
</div>`;
            cell.style["max-height"] = height + "px";
            cell.style["max-width"] = width + "px";
            cell.text = base64Img;
        }

Images tend to cut off, so I am trying to fix that here which mostly works fine. `adjustPivotContainerHeight` is needed also to prevent flexmonster table cutting off at the bottom because if just images sizes are increased scroll area height is not updated automatically.

Highlighting is controlled inside Flexmonster js using .fm-sheet-selection-canvas css class which makes it difficult to modify, not fully sure how.