From 7c64aa7d881cb76f78b5756f73fa5f46099f9322 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Tue, 8 Mar 2022 18:03:41 +0100
Subject: [PATCH] More mobile scaling

---
 src/OrchAddressViewer.js |  2 +-
 src/eventButton.js       | 12 ++++++------
 src/eventViewer.js       |  2 +-
 src/livepeer.js          |  2 +-
 src/style.css            | 12 ++++++++++++
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/OrchAddressViewer.js b/src/OrchAddressViewer.js
index 3af74c7..aaf20bf 100644
--- a/src/OrchAddressViewer.js
+++ b/src/OrchAddressViewer.js
@@ -7,7 +7,7 @@ const Address = (obj) => {
       <a className="selectOrchLight" href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
         <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
           <img alt="" src="livepeer.png" width="20" height="20" />
-          <span className="elipsText">{obj.address}</span>
+          <span className="elipsText elipsOnMobile">{obj.address}</span>
         </div>
       </a>
       <ReactTooltip id={obj.seed} place="top" effect="solid">
diff --git a/src/eventButton.js b/src/eventButton.js
index 979dec1..f9b2a00 100644
--- a/src/eventButton.js
+++ b/src/eventButton.js
@@ -29,11 +29,11 @@ const EventButton = (obj) => {
           <a className="selectOrch" style={{ cursor: 'alias' }} href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventTo}>
             <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
           </a>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'alias' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
+          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
             <span className="elipsText">🔎</span>
           </button>
           <button className="selectOrch" style={{ margin: 0, padding: 0, cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >
-            <span className="elipsText">{obj.eventObj.eventTo}</span>
+            <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventTo}</span>
           </button>
         </div>
     }
@@ -44,11 +44,11 @@ const EventButton = (obj) => {
           <a className="selectOrch" style={{ cursor: 'alias' }} href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventFrom}>
             <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
           </a>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'alias' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
+          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
             <span className="elipsText">🔎</span>
           </button>
           <button className="selectOrch" style={{ margin: 0, padding: 0, cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }}>
-            <span className="elipsText">{obj.eventObj.eventFrom}</span>
+            <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventFrom}</span>
           </button>
         </div >
     }
@@ -59,11 +59,11 @@ const EventButton = (obj) => {
           <a className="selectOrch" style={{ cursor: 'alias' }} href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
             <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
           </a>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'alias' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >
+          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >
             <span className="elipsText">🔎</span>
           </button>
           <button className="selectOrch" style={{ margin: 0, padding: 0, cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >
-            <span className="elipsText">{obj.eventObj.eventCaller}</span>
+            <p className="elipsText elipsOnMobileExtra">{obj.eventObj.eventCaller}</p>
           </button>
         </div>
     }
diff --git a/src/eventViewer.js b/src/eventViewer.js
index 6ca95a8..f782c0f 100644
--- a/src/eventViewer.js
+++ b/src/eventViewer.js
@@ -172,7 +172,7 @@ const EventViewer = (obj) => {
 
   let filterBit;
   if (obj.showFilter) {
-    filterBit = <div className="row roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0 }}>
+    filterBit = <div className="flexContainer roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
       <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 1 }}>
         <div className="stroke" style={{ margin: "0", padding: 0 }}>
           <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
diff --git a/src/livepeer.js b/src/livepeer.js
index efa532f..0d8a43b 100644
--- a/src/livepeer.js
+++ b/src/livepeer.js
@@ -173,7 +173,7 @@ const Livepeer = (obj) => {
           }}>
             <h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
           </button>
-          <h4>{headerString}</h4>
+          <h4 className="rowAlignLeft withWrap elipsOnMobile">{headerString}</h4>
         </div>
         <div className='rowAlignRight'>
           <button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
diff --git a/src/style.css b/src/style.css
index 08cce49..3b03f1d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -546,6 +546,18 @@ svg {
     visibility: hidden;
     display:none;
   }
+  .elipsOnMobile {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 30vw;
+    text-align: start;
+  }
+  .elipsOnMobileExtra {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 5vw;
+    text-align: start;
+  }
   .mobileNoPadding {
     padding: 0;
   }