Fix multi-autobuyer row sizes

This commit is contained in:
Andrei Andreev 2021-12-20 23:30:22 +03:00
parent b0e0f99887
commit 954a116488
2 changed files with 9 additions and 7 deletions

View File

@ -112,8 +112,8 @@ Vue.component("multiple-autobuyers-box", {
return this.rowCount === 1 ? this.entryCount : 5;
},
boxSize() {
// The width of the name panel is 20% - the other 80% is divvied up between the multiple autobuyers.
return `width: ${80 / this.entryCountPerRow}%`;
// The 1% reduced flex-basis is used to prevent wrapping due to the margins.
return `flex: 1 0 ${100 / this.entryCountPerRow - 1}%`;
},
isADBox() {
return this.name === Autobuyer.antimatterDimension.groupName;
@ -153,9 +153,8 @@ Vue.component("multiple-autobuyers-box", {
/>
</div>
<div class="l-autobuyer-box__autobuyers">
<span
<template
v-for="(autobuyer, id) in autobuyers"
:key="id"
>
<single-autobuyer-in-row
class="l-autobuyer-box__autobuyers-internal"
@ -165,7 +164,7 @@ Vue.component("multiple-autobuyers-box", {
:showBulk="!displayBulkAsGroup"
/>
<br v-if="id % entryCountPerRow === entryCountPerRow" />
</span>
</template>
</div>
</span>
<span

View File

@ -4123,13 +4123,16 @@ screen and (max-width: 480px) {
}
.l-autobuyer-box__autobuyers {
display: inline-block;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
width: 80rem;
}
.l-autobuyer-box__autobuyers-internal {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
}
.l-autobuyer-box__content {