UI layout displacements

[MuellerConstantin]

This is a cosmetic bug which, however, not least also affects the user experience massively.

Warning: I just noticed, that Bootstrap v3.3.5 is used. In this version there's no breakpoint named xl implemented yet, also range of resolutions of named breakpoints changed in newer versions. For more details see Grid Options. Hence a coarser distinction is required.

Expected Behavior

It is expected that the layout adapts (responsive) to the screen resolution of the respective device and thus enables an optimal user experience. This should also work for smaller devices like mine or tablets in general, the Microsoft Surface Go.

Current Behavior

The adjustment to the screen resolution works for the most part very well. However, there are occasional shifts in the layout of the views instances.html and settings.html. For screen resolutions that fall under the break point md (hence >= 992px) or lg (hence >= 1200px) in the Bootstrap Framework, problems with the layout occur in the lower range. By lining up the cards in a row, the individual cards have too little space to scale the contents reasonably, depending on the resolution.

In short, the problem exists for different resolutions such as 1024x768 which for Bootstrap already fall under the break point md, but do not offer enough space to render all components in a row. Also resolutions of breakpoint lg are affected.

Detailed Description

Laptop with screen resolution of 1280x950 therefor break point lg is matching:

IPad/Tablet with screen resolution of 1024x768 therefor break point md is matching:

Steps to Reproduce

1. Start the trampoline manager as described in the README
2. Open localhost:8080 with your favorite browser
3. Adapt screen resolution (With Firefox use Ctrl+Shift+M)
4. Choose a resolution in the lower part of a break point's range (e.g. 1024x768 for md)

Possible Solution

As already mentioned, there is too little space left for the individual cards to render the content accordingly. One solution is to give more space to the individual cards and to distribute them over several rows. The cards could no longer be arranged in a row, but this would also support screen resolutions at the bottom of a break point's range.

The actual Bootstrap version with its limited breakpoints prevents individual adapted layouts per resolution. This forces us to use 6:6:12 also for devices that could handle 2:2:8 because we're not able to differ between them when they're categorized by the same wide breakpoint range. Therefore must use 6:6:12 for both devices for preventing layout displacements. Upgrading the bootstrap version to v4.5 would resolve this problem because we could use more fine grained breakpoints (Introduced xl and shifts the resolution range for smaller/more exact ranges per breakpoint).

Possible Implementation

One possibility while staying with v3.5.5 is simply to move the Launch Instance card of view instances.html to a second line and to give the two fields Launch Group and External Instance more space. Simple approach would be to use 6:6:12 for this three columns for lg and/or md break point.

<div class="row">
    <div class="col-lg-6 col-md-6">
        <div class="card">
            <div class="header">
                <h4 class="title">Launch Group</h4>
                <p class="category">Select a group</p>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6">
        <div class="card">
            <div class="header">
                 <h4 class="title">External Instance</h4>
                 <p class="category">Select an instance</p>
             </div>
         </div>
     </div>
    <div class="col-lg-12 col-md-12">
         <div class="card">
             <div class="header">
                 <h4 class="title">Launch Instance</h4>
                 <p class="category">Set needed information</p>
             </div>
         </div>
     </div>
</div>

[MuellerConstantin]

I'll be working on this when I spare time in future. Which solution do you prefer? Upgrading Bootstrap to v4.5 with more fine grained breakpoints or using the same ratio for multiple different devices?

[ErnestOrt]

@0x1C1B As you suggested, both solutions will get bring us there. Maybe, I would pick up the first one, upgrading Bootstrap. But since it will be your time, please, feel free to choose.

Thanks for contributing!

[ErnestOrt]

Thanks @0x1C1B for taking time to solve it!