Update models more

website/package.json

@@ -6,6 +6,7 @@
     "animejs": "^2.2.0",
     "auto-bind2": "^1.0.2",
     "eventemitter3": "^2.0.3",
+    "npm": "^5.7.1",
     "prop-types": "^15.5.10",
     "radium": "^0.22.0",
     "react": "^16.2.0",

website/src/App.js

@@ -80,7 +80,9 @@ export class App extends Component {
       <Router basename='/'>
         <Column minHeight='100vh'>
           <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
-            <Box background={colorInfo.headerButtonBackground} borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
+            <Box background={colorInfo.headerButtonBackground}
+              borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
+              style={{ boxSizing: 'content' }}>
               <Row minWidth='100vw'>
                 <Row.Item>{headerButtonsLeft}</Row.Item>
                 <Row.Item grow />

website/src/ui/HeaderButton.js

@@ -26,12 +26,12 @@ class HeaderButton extends Component {
   }
 
   render() {
-    const size = sizeInfo.headerHeight - 2 * sizeInfo.headerBorderWidth
+    const size = sizeInfo.headerHeight - 2 * sizeInfo.headerBorderWidth // Times two to account for zooming
     const { onClick, icon, image } = this.props
     let content = null
 
     if (image) {
-      content = (<Image source={image} width={size} height={size} margin={sizeInfo.headerButtonMargin} />)
+      content = (<Image source={image} width={size} height='100%' margin={sizeInfo.headerButtonMargin} />)
     } else if (icon) {
       content = (<Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />)
     }