messy sizing of Interaction Partners column in gemBrowser compartments about metabolicatlas

[nanjiangshu]

Hi @e0, @mihai-sysbio and @inghylt ,

I find that the problem with the messy sizing of the button is caused by the setting of is-fullwidth at line https://github.com/MetabolicAtlas/MetabolicAtlas/blob/develop/frontend/src/components/explorer/gemBrowser/Gene.vue#L48 (the same for Metabolite.vue and others).

One quick solution is to set the font size of this button to is-small but then the font size of Interaction Partners are different from the rest in this div

Another solution is set a min-width for the section. However, after set the min-width by e.g.

<div style="min-width:20%" class="column is-2-widescreen is-3-desktop is-full-tablet has-text-centered">

This section tends to be moved to the next line when one increase the width of the browser window. Is there a way to force bulma colum to place all columns in the same line?

[mihai-sysbio]

How about is-3-widescreen for this <div> and is-9-widescreen for the previous one?

[nanjiangshu]

This seems do the trick! I will test it on Chrome and Safari to see if it works there as well.

[e0]

@nanjiangshu Please make sure to test this on the metabolite pages that include a ChEBI image as well.

[nanjiangshu]

Great point @e0! I've already tested and added an example in the pull request #593 description.

[e0]

Great point @e0! I've already tested and added an example in the pull request #593 description.

Nice, sorry that I forgot about it.