fix: Splitter-pane sizing stops randomly and pushes other pane away in FluentMultiSplitter

🐛 Bug Report

I've been dragging the splitter bar around and noticed that on some drags the pane doesn't expand fully to the next pane and even pushes the next pane away (see video). When clicking away and dragging again, the splitter works again as expected. Not sure when and why this bug occurs, since the drag movement where the bug occurs hasn't been executed differently from the working drag movement.

https://github.com/user-attachments/assets/9538bebf-8aba-49c2-8c75-4ee73449a35e

💻 Repro or Code Sample

Razor page:

<FluentMultiSplitter>
  <FluentMultiSplitterPane Class="d-flex flex-column right-side" Size="70%" Min="10%" Style="background-color: #f0f0f0;">
    <FluentMultiSplitter Orientation="Microsoft.FluentUI.AspNetCore.Components.Orientation.Vertical" Style="--fluent-multi-splitter-background-color: #f0f0f0">
        <FluentMultiSplitterPane Class="d-flex" Min="12%" Size="13%" Max="85%" Collapsible="true">
            <div style="width: 100%; height: 100%">
                <FluentMultiSplitter Style="--fluent-multi-splitter-background-color: #f0f0f0">
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto" Size="99%">
                        <table class="pane-content">
                            <tr>
                            <th class="wrap-char" style="background-color: #dcdcdc; font-weight: normal; vertical-align: central;">Patient</th>
                            <td class="ps-2 pt-0" style="color: blue; font-size: 1.5rem">
                                <span style="background-color: pink;">TEST</span> test, <span style="font-size: 0.9rem;">date</span> info
                                </td>
                            </tr>
                            <tr>
                            <th class="wrap-char" style="background-color: #dcdcdc; font-weight: normal; vertical-align: text-top;">address</th>
                                <td class="ps-2">
                                test street
                                </td>
                            </tr>
                            <tr>
                            <th class="wrap-char" style="background-color: #dcdcdc; font-weight: normal; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                <span style="background-color: #ffffb7">content</span> <span style="background-color: pink">content</span>
                                </td>
                            </tr>
                        </table>
                    </FluentMultiSplitterPane>
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto" Size="1%">
                        <div class="pane-content"></div>
                    </FluentMultiSplitterPane>
                </FluentMultiSplitter>
            </div>
        </FluentMultiSplitterPane>
        <FluentMultiSplitterPane Class="d-flex" Style="background-color: #f0f0f0" Size="30%" Max="73%" Collapsible="true">
            <div style="width: 100%; height: 100%">
                <FluentMultiSplitter Style="--fluent-multi-splitter-background-color: #f0f0f0">
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto;" Size="70%">
                        <table class="pane-content">
                            <tr>
                            <th class="pe-4" style="background-color: #dcdcdc; font-weight: normal; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                    content
                                </td>
                            </tr>
                        </table>
                    </FluentMultiSplitterPane>
                    <FluentMultiSplitterPane Style="background-color: white; overflow-y:auto;" Size="30%">
                        <table class="pane-content">
                            <tr>
                                <th class="pe-2" style="background-color: lightcyan; font-weight: normal; border-color: white; border-bottom-width: 1px; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                    content
                                </td>
                            </tr>
                            <tr>
                                <th class="pe-2" style="background-color: lightcyan; font-weight: normal; border-color: white; border-bottom-width: 1px; vertical-align: text-top;">title</th>
                                <td class="ps-2">
                                    content
                                </td>
                            </tr>
                        </table>
                    </FluentMultiSplitterPane>
                </FluentMultiSplitter>
            </div>
        </FluentMultiSplitterPane>
    
        <FluentMultiSplitterPane Id="mainGridContainer" Class="d-flex flex-column" Min="15%" Size="57%" Style="min-height: 15%;">
            <div class="d-flex btn-group-sm text-small ps-1 mb-1 flex-shrink-0" style="background-color: #f0f0f0; white-space: nowrap;" role="group" >
                <button type="button">!</button>
                <button type="button">01.2022</button>
                <button type="button">
                    08.2022
                </button>
            </div>
           <div>C1FlexGrid</div>
            <div class="d-flex ps-1 pt-1 pb-1 text-small align-items-center flex-shrink-0 default-font" style="position: relative; bottom: 0; background-color: #f0f0f0; min-height: 2%; overflow-x:auto">
                <div class="pe-0 ps-0 flex-shrink-0" style="width: 8rem;">
                    <InputDate id="inputDate" @bind-Value="inputDate" Type="InputDateType.Date"></InputDate> 
                </div>
                <div class="ps-0 pe-0 flex-shrink-0" style="width: 4rem">
                    <label for="enter" class="col-form-label text-end" style="width: 100%">Enter:</label>
                </div>
                <div class="ps-1 pe-0 flex-shrink-0" style="width: 2rem;">
                    <InputText class="form-control p-0" style="width: 100%"id="enter" @bind-Value="inputText"></InputText>
                </div>
                <div class="ps-1 pe-0 flex-shrink-0" style="width: 9rem;">
                    <InputText class="form-control p-0" style=" width: 100%" @bind-Value ="inputText"></InputText>
                </div>
                <div class="d-flex ps-1 btn-group-sm flex-shrink-0" role="group">
                    <button type="button">X</button>
                    <button type="button">?</button>
                    <button type="button">P</button>
                    <button type="button">all</button>
                    <button type="button">1</button>
                    <button type="button">2</button>
                    <button type="button">3</button>
                    <button type="button">4</button>
                    <button type="button">5</button>
                    <button type="button">6</button>
                    <button type="button">btn</button>
                    <button type="button">btn</button>
                    <button type="button">btn</button>
                    <button type="button">btn</button>
                </div>
            </div>
        </FluentMultiSplitterPane>
    </FluentMultiSplitter>
  </FluentMultiSplitterPane>
</FluentMultiSplitter>

scoped css:

button {
    background-color: #f0f0f0;
    border-color: white;
    border-style: solid;
    box-shadow: none;
}
    button:hover, .btn-no-border:hover {
        border-color: dodgerblue;
        border-style: solid;
    }
button:focus {
    background-color: #b9d1ea;
}
button:disabled{
    border-color: white;
}
.text-small {
    font-size: small;
}
.right-side *{
    font-family: Consolas;
}
.default-font * {
    font-family: Arial, Helvetica, sans-serif;
}
td, .wrap-char {
    word-wrap: anywhere;
}

code behind:

        private string inputText = "";
        private DateTime inputDate { get; set; } = DateTime.Today;

🤔 Expected Behavior

The splitter bar (with the pane) should be able to expand everytime until the next pane is reached and not push the pane away or jump around randomly.

😯 Current Behavior

On some drags (exact circumstances of this behaviour are unknown to me) the splitter doesn't expand until the next pane is reached and even pushes the next pane away. (see video)

💁 Possible Solution

Maybe a wrong mouse y-coordinate or pane size is registered and therefore the calculations are off?

🔦 Context

🌍 Your Environment

• OS & Device: Windows 11 PC
• Browser: Google Chrome
• .NET and Fluent UI Blazor library Version: .NET 8.0, Fluent UI v4.13.2

Start by reproducing the nested FluentMultiSplitter Razor sample in Chrome, then inspect the FluentMultiSplitter drag and pane-size handling described by the issue. The fix is done when repeated drags consistently expand the selected pane to the next pane without pushing it away or jumping.