Is there a way to make the first image look like the second image, using some kind of characters to pad the text?
Using fields isn't useful because on mobile, the field drops down. (See image 3)
Or, is there a way to prevent the field from being overflowed downwards on mobile, and stretch / fit to size instead?
Image 1: Current
Image 2: Desired
Image 3: Fields on Mobile
Code
function getEmbed() {
const embedFields = [];
servers.forEach(server => {
const ships = server.ships;
const ships_display_names = ships.map(ship => {
return `${ship.colour}\t**${ship.name}**` + `${ship_by_capacity[ship.capacity]} ${ship.emissary}${ship.captained ? ` ${emojis['voyage']}` : ''}`;
}).join('\n');
const embedLines = [
{
'name': `__Server Alliance ${servers.indexOf(server) + 1}__`,
'value': '** **\n' + ships_display_names,
'inline': false,
},
];
embedFields.push([
...embedLines,
{
name: '** **',
value: '\u200B',
inline: false,
},
]);
});