UI misalignment on seed info
Opened this issue · 2 comments
This appears to be an issue with the alignment of the information on the right column of information. All three rows have the same right margin (see attached). The middle row has a different value for its second line (Page + All internal and external links instead of Page + Same Domain Links) than the first and third row. A fourth row with the crawl values of the second would likely be horizontally aligned with the second column of the second row.
With that in-mind, this design issue should be normalized. While the text in the right column is left aligned, the "cell's size" is defined by the content. @N0taN3rd ?
@machawk1
Right now that UI section is layed out via flex (wail-ui/components/collections/viewCollection/mementoCard/mementoCardBody.js)
const MementoCardBody = ({added, mementos, conf}) => (
<Flex key={`MementoCardBody-flex-${added}-${mementos}`} row alignItems='baseline' justifyContent='space-between'>
<CardHeader key={`MementoCardBody-mementos-${added}-${mementos}`} title={`Mementos: ${mementos}`} />
<CardHeader key={`MementoCardBody-confTitle-${added}-${mementos}`} title='Archive Configuration' subtitle={conf} />
</Flex>
)
The issue comes from the interal styling used by the material-ui/Card/CarcHeader and have noticed this happening as well for the Archive Twitter section and Adding Seeds
when I transitioned to a more "flexable" layout scheme overall for the UI.
The conf (Page + Same Domain....) is only text with each entry on its own line.
My plan for this issue and section is to pull out the Archive config into its own Component in order to facilitate better UI look/feel and hopefully facilitate the addition of relaunching an archive configuration from here.