From 5581b84ac607c0f2c07b5b77895662fd50a31f17 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Mon, 21 Mar 2022 16:11:28 +0100
Subject: [PATCH] Formatting fixes

---
 src/components/OrchAddressViewer.js   |  2 +-
 src/components/OrchDelegatorViewer.js |  6 ++++--
 src/components/OrchInfoViewer.js      | 22 +++++++++++-----------
 src/components/orchestratorViewer.js  |  4 ++--
 src/style.css                         |  7 +++++++
 5 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/OrchAddressViewer.js b/src/components/OrchAddressViewer.js
index db1c332..bac23c5 100644
--- a/src/components/OrchAddressViewer.js
+++ b/src/components/OrchAddressViewer.js
@@ -77,7 +77,7 @@ const Address = (obj) => {
   }
 
   return (
-    <div className="rowAlignLeft">
+    <div className="row" style={{width: 'unset'}}>
       <a className="selectOrchLight" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} >
         <img alt="" src="livepeer.png" width="20em" height="20em" />
       </a>
diff --git a/src/components/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js
index f1cc0b2..fa591f8 100644
--- a/src/components/OrchDelegatorViewer.js
+++ b/src/components/OrchDelegatorViewer.js
@@ -18,7 +18,9 @@ const OrchDelegatorViewer = (obj) => {
                   delegators.map((delObj, idx) => {
                     return (
                       <div className="flexContainer forceWrap" key={"delegator" + idx}>
-                        <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
+                        <div className="rowAlignLeft">
+                          <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
+                        </div>
                         <div className="rowAlignRight">
                           <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                         </div>
@@ -39,7 +41,7 @@ const OrchDelegatorViewer = (obj) => {
         <div className="row">
           <h3>The selected Orchestrator has no Delegators</h3>
         </div>
-        <div className="verticalDivider"/>
+        <div className="verticalDivider" />
       </div>
     </div >
   )
diff --git a/src/components/OrchInfoViewer.js b/src/components/OrchInfoViewer.js
index 95c4574..437bce3 100644
--- a/src/components/OrchInfoViewer.js
+++ b/src/components/OrchInfoViewer.js
@@ -95,20 +95,23 @@ const OrchInfoViewer = (obj) => {
     if (thisInfo) {
       if (thisInfo.description) {
         ensDescription =
-          <div className="row">
+          <div className="stroke">
+            <div className="verticalDivider" />
             <span>{thisInfo.description}</span>
           </div>
       }
       if (thisInfo.url) {
-        if (!thisInfo.url.startsWith('http')){
+        if (!thisInfo.url.startsWith('http')) {
           thisInfo.url = "https://" + thisInfo.url;
         }
         ensUrl =
-          <a className="selectOrchLight" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={thisInfo.url} >
-            <div className="rowAlignLeft">
-              <span>{thisInfo.url}</span>
-            </div>
-          </a >
+          <div className="stroke">
+            <a className="selectOrchLight" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={thisInfo.url} >
+              <div className="rowAlignLeft">
+                <span>{thisInfo.url}</span>
+              </div>
+            </a >
+          </div>
       }
     }
 
@@ -119,11 +122,8 @@ const OrchInfoViewer = (obj) => {
           <div className="row">
             <h3 >Orchestrator Info</h3>
           </div>
-          <div className="row">
-            <Address address={thisID} />
-          </div>
+          <Address address={thisID} />
           {ensUrl}
-          <div className="verticalDivider" />
           {ensDescription}
           <div className="stretchAndBetween" style={{ borderTop: '2px solid rgba(15,15,15,0.05)', marginTop: '0.2em' }} >
             <Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
diff --git a/src/components/orchestratorViewer.js b/src/components/orchestratorViewer.js
index cfcf5b5..55ac5ca 100644
--- a/src/components/orchestratorViewer.js
+++ b/src/components/orchestratorViewer.js
@@ -6,7 +6,7 @@ const Orchestrator = (obj) => {
   if (obj.thisOrchestrator) {
     if (obj.forceVertical) {
       return (
-        <div className="hostInfo sideMargin">
+        <div className="hostInfo sideMargin mobileNoSideMargin">
           <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
             <OrchInfoViewer
               rewardCut={obj.thisOrchestrator.rewardCut}
@@ -22,7 +22,7 @@ const Orchestrator = (obj) => {
       )
     } else {
       return (
-        <div className="hostInfo sideMargin">
+        <div className="hostInfo sideMargin mobileNoSideMargin">
           <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
             <OrchInfoViewer
               rewardCut={obj.thisOrchestrator.rewardCut}
diff --git a/src/style.css b/src/style.css
index 2db8ac3..fbe9772 100644
--- a/src/style.css
+++ b/src/style.css
@@ -679,6 +679,13 @@ svg {
   .mobileNoPadding {
     padding: 0;
   }
+  .mobileNoMargin {
+    margin: 0;
+  }
+  .mobileNoSideMargin {
+    margin-left: 0;
+    margin-right: 0;
+  }
   .main-container {
     height: calc(100vh - 60px);
   }