Fix tab sizes behaviour

[christophfriedrich]

See Open-EO/openeo-vue-components#21 -- it's a wontfix/cantfix so I've gotta deal with it here in the Hub.

[christophfriedrich]

Idea: Change the v-show in this line:

https://github.com/Open-EO/openeo-hub/blob/c18f32eed724305ff7b7dc7bd93c300321846514/src/components/BackendGroup.vue#L8

(which was introduced in b86dc5d) to a v-if. That will definitely fix this issue, but it should be checked carefully whether that doesn't break anything else.

[christophfriedrich]

Other ideas:

• call the component's adjustSizes function manually
• introduce Hub-specific CSS that fixes it
• come up with an upstream fix, e.g. maybe behave differently if getBoundingClientRect's area is 0

[christophfriedrich]

Replacing the v-show with v-if breaks rendering of the Backend component when the BackendGroup is expanded the second time.

that could be avoided though when using deepcloning: changing https://github.com/Open-EO/openeo-hub/blob/44ec7637473e7c07d92f0c3a56e863468734290d/src/components/Backend.vue#L114 to var original = JSON.parse(JSON.stringify(this.backend));

But then using v-if still breaks the memorization of the state of the collapsed component (which tab was selected, which sub-sections were expanded, the collection details that were ajax-loaded etc.)

Forgetting the collection details could be regarded an advantage because it's a lot of data that is kept in memory, and the state of the tab and the collapses could be saved in a different way and then restored...

But that's quite a bit of work.

---

Manually calling adjustSizes just works and is a quick fix. So therefore I used that (at least for now) to finally get this issue out of the way.

Disadvantage: adjustSizes is not part of the public API of the vue-components so I'm relying on that not changing...

[m-mohr]

Disadvantage: adjustSizes is not part of the public API of the vue-components so I'm relying on that not changing...

You can "feature-detect" it, if you really want this to be safe. ;-)

if (typeof tabs.adjustSizes === 'function') {
   tabs.adjustSizes();
}