various-js: improve scrolling experience on iOS

Removes use of vh units, as they don't play well with safari
(https://bugs.webkit.org/show_bug.cgi?id=141832). Adjusts layouts
accordingly.

pkg/interface/config/webpack.dev.js

@@ -18,7 +18,7 @@ class UrbitShipPlugin {
   }
 
   apply(compiler) {
-    compiler.hooks.afterCompile.tapPromise(
+    compiler.hooks.afterEmit.tapPromise(
       'UrbitShipPlugin',
       async (compilation) => {
         const src = path.resolve(compiler.options.output.path, 'index.js');

pkg/interface/src/App.js

@@ -33,8 +33,14 @@ import GlobalApi from './api/global';
 const Root = styled.div`
   font-family: ${p => p.theme.fonts.sans};
   line-height: ${p => p.theme.lineHeights.regular};
-  max-height: 100vh;
-  min-height: 100vh;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+`;
+
+const Content = styled.div`
+   height: calc(100% - 45px);
 `;
 
 const StatusBarWithRouter = withRouter(StatusBar);
@@ -72,7 +78,7 @@ export default class App extends React.Component {
             invites={this.state.invites}
             api={this.api}
             />
-            <div>
+            <Content>
             <Switch>
               <Route exact path="/"
               render={ p => (
@@ -131,7 +137,7 @@ export default class App extends React.Component {
               />
               <Route component={NotFound} />
               </Switch>
-            </div>
+            </Content>
           </Router>
         </Root>
       </ThemeProvider>

pkg/interface/src/apps/chat/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import ChatApi from '../../api/chat';
 import ChatStore from '../../store/chat';
@@ -102,7 +102,7 @@ export default class ChatApp extends React.Component {
     );
 
     return (
-      <div>
+      <Switch>
         <Route
           exact
           path="/~chat"
@@ -370,7 +370,7 @@ export default class ChatApp extends React.Component {
             );
           }}
         />
-      </div>
+      </Switch>
   );
   }
 }

pkg/interface/src/apps/chat/components/chat.js

@@ -143,7 +143,7 @@ export class ChatScreen extends Component {
       this.askForMessages(DEFAULT_BACKLOG_SIZE);
     }
 
-    if(props.read === props.length){
+    if(props.read === props.length) {
       this.scrolledToMarker = true;
       this.setState(
         {
@@ -487,9 +487,10 @@ ref={(e) => {
         >
           <Link to="/~chat/">{'⟵ All Chats'}</Link>
         </div>
+
         <div
-          className={'pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative' +
-          'overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0'}
+          className={'pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative ' +
+          'overflow-x-auto overflow-y-hidden flex-shrink-0 '}
           style={{ height: 48 }}
         >
           <SidebarSwitcher

pkg/interface/src/apps/chat/components/skeleton.js

@@ -30,10 +30,7 @@ export class Skeleton extends Component {
 
     return (
       // app outer skeleton
-      <div style={{
-        height: 'calc(100vh - 45px)'
-      }} className={'h-100 w-100 bg-gray0-d ' + popoutWindow}
-      >
+      <div className={'h-100 w-100 bg-gray0-d ' + popoutWindow}>
       {/* app window borders */}
         <div className={ 'cf w-100 flex h-100 ' + popoutBorder }>
           {/* sidebar skeleton, hidden on mobile when in chat panel */}
@@ -49,7 +46,7 @@ export class Skeleton extends Component {
           >
             {/* mobile-specific navigation */}
             <div className={mobileNavClasses}>
-              <div className="bb b--gray4 b--gray1-d white-d inter f8 pl3 pt6 pb3">
+              <div className="bb b--gray4 b--gray1-d white-d inter f8 pl3 pb3">
                 All Chats
               </div>
             </div>

pkg/interface/src/apps/chat/css/custom.css

@@ -6,6 +6,16 @@
 html, body {
   height: 100%;
   width: 100%;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
@@ -439,4 +449,4 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
     background-color: rgba(255,255,255, 0.3);
     border-radius: 2px;
   }
-}
+}

pkg/interface/src/apps/groups/app.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import GroupsApi from '../../api/groups';
 import GroupsSubscription from '../../subscription/groups';
@@ -64,7 +64,7 @@ export default class GroupsApp extends Component {
     const s3 = state.s3 ? state.s3 : {};
 
     return (
-        <div>
+        <Switch>
           <Route exact path="/~groups"
             render={(props) => {
               return (
@@ -328,7 +328,7 @@ export default class GroupsApp extends Component {
               );
             }}
           />
-        </div>
+        </Switch>
     );
   }
 }

pkg/interface/src/apps/groups/components/lib/group-sidebar.js

@@ -117,7 +117,7 @@ export class GroupSidebar extends Component {
     return (
       <div className={'bn br-m br-l br-xl b--gray4 b--gray1-d lh-copy h-100 ' +
        'flex-basis-30-ns flex-shrink-0 mw5-m mw5-l mw5-xl flex-basis-100-s ' +
-        'relative overflow-hidden pt3 pt0-m pt0-l pt0-xl ' + activeClasses}
+        'relative overflow-hidden ' + activeClasses}
       >
         <div className="overflow-auto pb8 h-100">
           <Link to="/~groups/new" className="dib">

pkg/interface/src/apps/groups/components/skeleton.js

@@ -8,7 +8,7 @@ export class Skeleton extends Component {
       props.activeDrawer === 'groups' ? 'dn flex-m flex-l flex-xl' : 'flex';
 
     return (
-      <div className="h-100 w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl" style={{ height: 'calc(100vh - 45px)' }}>
+      <div className="h-100 w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
         <div className="cf w-100 h-100 flex ba-m ba-l ba-xl b--gray4 b--gray1-d br1">
           <GroupSidebar
             contacts={props.contacts}

pkg/interface/src/apps/links/components/skeleton.js

@@ -21,7 +21,7 @@ export class Skeleton extends Component {
       ? props.invites['/link'] : {};
 
     return (
-      <div className={'absolute w-100 ' + popoutWindow} style={{ height: 'calc(100vh - 45px)' }}>
+      <div className={'absolute w-100 ' + popoutWindow}>
         <div className={'cf w-100 h-100 flex ' + popoutBorder}>
         <ChannelsSidebar
             active={props.active}

pkg/interface/src/apps/publish/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import _ from 'lodash';
 
 import './css/custom.css';
@@ -75,7 +75,7 @@ export default class PublishApp extends React.Component {
     }
 
     return (
-      <div>
+      <Switch>
         <Route exact path="/~publish"
           render={(props) => {
             return (
@@ -314,7 +314,7 @@ export default class PublishApp extends React.Component {
             }
           }}
         />
-      </div>
+      </Switch>
     );
   }
 }

pkg/interface/src/apps/publish/components/skeleton.js

@@ -18,7 +18,7 @@ export class Skeleton extends Component {
       ? '': 'ba-m ba-l ba-xl b--gray4 b--gray1-d br1';
 
     return (
-      <div className={'w-100 ' + popoutWindow} style={{ height: 'calc(100vh - 45px)' }}>
+      <div className={'w-100 ' + popoutWindow}>
         <div className={'cf w-100 h-100 flex ' + popoutBorder}>
           <Sidebar
             popout={popout}