From 727e2cd2ffda1eb155a6b44057826ce5041baed6 Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Mon, 13 Mar 2023 11:08:53 +0000
Subject: [PATCH] fix(explorer): neaten validators mobile view (#3160)

Co-authored-by: asiaznik <artur@vegaprotocol.io>
---
 .../app/routes/validators/validators-page.tsx | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/explorer/src/app/routes/validators/validators-page.tsx b/apps/explorer/src/app/routes/validators/validators-page.tsx
index cf70d1547..e9ee92a4d 100644
--- a/apps/explorer/src/app/routes/validators/validators-page.tsx
+++ b/apps/explorer/src/app/routes/validators/validators-page.tsx
@@ -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>