fix(explorer): neaten validators mobile view (#3160)

Co-authored-by: asiaznik <artur@vegaprotocol.io>
This commit is contained in:
Edd 2023-03-13 11:08:53 +00:00 committed by GitHub
parent 06b2dd18f9
commit 727e2cd2ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -176,25 +176,14 @@ export const ValidatorsPage = () => {
const validatorName =
v.name && v.name.length > 0 ? v.name : truncateMiddle(v.id);
return (
<li className="mb-5" key={v.id}>
<li className="mb-5 relative" key={v.id}>
<div
data-testid="validator-tile"
validator-id={v.id}
className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden relative flex gap-2 items-start justify-between"
className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden"
>
{v.avatarUrl && (
<div className="w-20">
<ExternalLink href={validatorPage}>
<img
className="w-full"
src={v.avatarUrl}
alt={validatorName}
/>
</ExternalLink>
</div>
)}
<div className="w-full">
<h2 className="font-alpha text-2xl">
<h2 className="font-alpha text-2xl leading-[60px]">
<ExternalLink href={validatorPage}>
{validatorName}
</ExternalLink>
@ -315,6 +304,23 @@ export const ValidatorsPage = () => {
</div>
</div>
</KeyValueTableRow>
{v.avatarUrl && (
<KeyValueTableRow>
<div>{t('Avatar')}</div>
<div>
<ExternalLink
href={validatorPage}
className="mx-auto"
>
<img
className="max-w-[75px] md:max-w-[200px] max-h-[80px]"
src={v.avatarUrl}
alt={validatorName}
/>
</ExternalLink>
</div>
</KeyValueTableRow>
)}
</KeyValueTable>
</div>
</div>