[Bug] Side content tab underline breaks on browser window resize

[Aulud]

[Bug] Side content tab underline breaks on browser window resize

UI-related bug.

Bug description

The SideContent component was updated in PR #740 to make use of BlueprintJS 3's Tabs component. This includes an addition of an animated blue underline that moves between tabs when tabs are switched.

When the side-content width is modified by dragging the central divider, the position of the underline decouples from that of the selected tab. However, upon releasing the <Resizable> divider, the underline recomputes its position and snaps back under the currently selected tab.

Additionally, all of

• resizing the browser window,
• minimising it from a maximised state, and
• opening the browser's developer console (F12)

also triggers this decoupling, afterwhich the underline fails to recompute its position, remaining frozen in an incorrect position until the side-content width is modified again or a tab is selected.

This bug seems to occur in all available workspaces (assessment, grading, playground, mission editor).

Reproduction steps

1. Open the mock front-end (as of commit Expose ExternalLibrary outside Playground, record ExternaLibrary change #796) in either Chrome or Firefox.
2. Proceed to the Playground.
3. Attempt to resize the central divider - this should demonstrate the decoupling of the animated underline.
4. Undock the browser window from a maximised state, then attempt to resize it by dragging its borders - this should demonstrate the frozen underline. Alternatively, press F12 to bring up the Developer console.

Development environment

Browser: Google Chrome Version 75.0.3770.142 (Official Build) (64-bit)
Browser: Firefox Quantum 68.0.1 (64-bit)

Last updated 3 Aug 2019, 00:15AM

[alcen]

Unfortunately this is a side effect of centering the tabs. The calculations for the position of the line come from the left margin

We could align the tabs to the left and it would solve this issue. Or we can disable the line altogether

[martin-henz]

Hmm not sure. The bug is real, but minor. The underline is nice, and the centering looks good.

[alcen]

Hmm not sure. The bug is real, but minor. The underline is nice, and the centering looks good.

I think we could live with this for now? It is a core issue/feature request with Blueprint, that it does not allow tabs to be centered. Currently it is done by overriding their CSS styles with our own

[martin-henz]

ok

[martin-henz]

OK, let's live with it.

[Aulud]

Closed as the issue is resolved by #879.

[Aulud]

Hi Prof @martin-henz, any elaboration on steps to reproduce the issue?

[martin-henz]

This issue has gone away with the refactoring of the frontend. Let's close it.