ae-address style

[emilsomm]

When using the ae-address component for the redesign of the Blockchain Explorer I have met some problems using this component.

Expected Behavior:

what i need is this

Current Behavior:

but what im getting is

Possible Solution:

If we add an option for style with values such as flex, grid, flat and set the width property according to the value of style we could achieve the desired look. I also think that flat has more to do with style than length as is currently the case.

.ae-address {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font-weight: 500;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    /*
    * also would be great to have more control over the font-size as an option, 
    * so the components would inherit from parent component set locally
    * ex:
    * font-size: 1em;
    * or
    * font-size: inherit;
    */
}

.ae-address > li {
    width: 3em;
}

[davidyuk]

@emilsomm I think grid/flex is not necessary for this component, in the Base app we are using own plain-text version that looks actually as on the first screenshot you have sent. https://github.com/aeternity/aepp-base/blob/develop/src/components/AeAddress.vue