More mobile scaling

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">

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>
     }

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 }}>

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={() => {

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;
   }