diff --git a/css/80_app.css b/css/80_app.css
index e1813d0d4..6c63ac342 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -16,7 +16,6 @@ body {
         sans-serif;
     margin: 0;
     padding: 0;
-    min-width: 768px;
     color: #333;
     overflow: hidden;
     -ms-user-select: none;
@@ -32,7 +31,6 @@ body {
 .id-container {
     height: 100%;
     width: 100%;
-    min-width: 768px;
 }
 
 #content {
@@ -55,22 +53,6 @@ body {
     transition-duration: 200ms;
 }
 
-/* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */
-/* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */
-@-moz-document url-prefix() {
-    #content > #bar {
-        width: 100vw;
-    }
-    #content.inactive > #bar > .spacer.col4 {
-        width: 0px;
-    }
-    #content.active > #bar > .spacer.col4 {
-        width: 33.3333%;
-        transition-duration: 200ms;
-        transition-timing-function: step-end;
-    }
-}
-
 #defs {
     /* Can't be display: none or the clippaths are ignored. */
     position: absolute;
@@ -78,35 +60,6 @@ body {
     height: 0;
 }
 
-.spacer {
-    height: 40px;
-    margin-right: 10px;
-}
-
-.spinner {
-    opacity: .5;
-    display: inline-block;
-}
-
-.spinner img {
-    height: 40px;
-    width: 40px;
-    border-radius: 4px;
-    margin-right: 10px;
-    background: black;
-}
-[dir='rtl'] .spinner img {
-    margin-left: 10px;
-    margin-right: auto;
-    -moz-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-    filter: FlipH;
-    -ms-filter: "FlipH";
-}
-
-
 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -142,7 +95,6 @@ h3 {
     font-weight: bold;
     margin-bottom: 10px;
 }
-
 h4, h5 {
     font-size: 12px;
     font-weight: bold;
@@ -170,23 +122,18 @@ p {
     margin: 0;
     padding: 0;
 }
-
 p:last-child {
     padding-bottom: 0;
 }
-
 em {
     font-style: italic;
 }
-
 strong {
     font-weight: bold;
 }
-
 a:visited, a {
     color: #7092ff;
 }
-
 a:hover {
     color: #597be7;
 }
@@ -278,19 +225,9 @@ table.tags, table.tags td, table.tags th {
 
 /* Grid
 ------------------------------------------------------- */
-.col0    { float: left; width: 04.1666%; }
-.col1    { float: left; width: 08.3333%; }
-.col2    { float: left; width: 16.6666%; }
-.col3    { float: left; width: 25.0000%; max-width: 300px; }
-.col4    { float: left; width: 33.3333%; max-width: 400px; }
-.col5    { float: left; width: 41.6666%; max-width: 500px; }
-.col6    { float: left; width: 50.0000%; max-width: 600px; }
-.col7    { float: left; width: 58.3333%; }
-.col8    { float: left; width: 66.6666%; }
-.col9    { float: left; width: 75.0000%; }
-.col10   { float: left; width: 83.3333%; }
-.col11   { float: left; width: 91.6666%; }
-.col12   { float: left; width: 100.0000%; }
+.col6  { float: left; width: 50.0000%; max-width: 600px; }
+.col8  { float: left; width: 66.6666%; }
+.col12 { float: left; width: 100.0000%; }
 
 /* UI Lists
 ------------------------------------------------------- */
@@ -326,7 +263,7 @@ ul li { list-style: none;}
 }
 
 .toggle-list > label.active {
-    background: #E8EBFF;
+    background: #e8ebff;
 }
 
 
@@ -424,35 +361,10 @@ button.minor {
 button.minor .icon {
     opacity: .5;
 }
-
 button.minor:hover {
     background-color: #f1f1f1;
 }
 
-.button-wrap {
-    display: inline-block;
-    padding-right: 10px;
-    margin: 0;
-}
-[dir='rtl'] .button-wrap {
-    padding-left: 10px;
-}
-.button-wrap button {
-    white-space: nowrap;
-    padding: 0px 8px;
-}
-
-.button-wrap button:only-child {
-    width: 100%;
-}
-
-.button-wrap:last-of-type {
-    padding-right: 0;
-}
-[dir='rtl'] .button-wrap:last-of-type {
-    padding-left: 0;
-}
-
 .joined button {
     border-radius: 0;
     border-right: 1px solid rgba(0,0,0,.5);
@@ -465,14 +377,12 @@ button.minor:hover {
 .fillL .joined button {
     border-right: 1px solid #fff;
 }
-
 .joined button:first-child {
     border-radius: 4px 0 0 4px;
 }
 [dir='rtl'] .joined button:first-child {
     border-radius: 0 4px 4px 0;
 }
-
 .joined button:last-child {
     border-right-width: 0;
     border-radius: 0 4px 4px 0;
@@ -485,18 +395,15 @@ button.action {
     background: #7092ff;
     color: #fff;
 }
-
 button[disabled].action,
 button[disabled].action:hover {
     background: #cccccc;
     color: #888;
 }
-
 button.action:focus,
 button.action:hover {
-    background: #597BE7;
+    background: #597be7;
 }
-
 button.secondary-action {
     background: #ececec;
 }
@@ -505,61 +412,6 @@ button.secondary-action:focus,
 button.secondary-action:hover {
     background: #cccccc;
 }
-.button-wrap.sidebar-collapse,
-.button-wrap.save-wrap {
-    min-width: 33.3333%;
-}
-.button-wrap.modes {
-    width: 100%;
-}
-
-button.undo-button,
-button.redo-button {
-    width: 44px;
-}
-button.save {
-    padding: 0;
-    display: flex;
-}
-button.save .save-inner-wrap {
-    flex: 1;
-}
-button.save .count {
-    display: none;
-}
-button.save.has-count .count {
-    display: inline-block;
-    color: #333;
-    border: 0px solid rgba(51, 51, 51, 0.2);
-    border-left-width: 1px;
-    padding: 0px 12px;
-}
-[dir='rtl'] button.save.has-count .count {
-    border-left-width: 0px;
-    border-right-width: 1px;
-}
-
-.help-wrap svg.icon.pre-text.add-note,
-button.add-note svg.icon {
-    height: 15px;
-    width: 15px;
-    color: rgba(0,0,0,0.25);
-    stroke: #333;
-    stroke-width: 60px;
-    margin-top: 3px;
-}
-button.add-note svg.icon {
-    margin-left: unset;
-    margin-right: 7px;
-}
-[dir='rtl'] button.add-note svg.icon {
-    margin-left: 7px;
-    margin-right: unset;
-}
-.help-wrap svg.icon.pre-text.add-note {
-    margin-left: 3px;
-    margin-right: 3px;
-}
 
 
 /* Icons
@@ -593,15 +445,12 @@ button.add-note svg.icon {
 .icon.light {
     color: #fff;
 }
-
 .icon.created {
     color: #00ca07;
 }
-
 .icon.modified {
     color: #666;
 }
-
 .icon.deleted {
     color: #ea0000;
 }
@@ -618,6 +467,9 @@ button.add-note svg.icon {
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
 #bar {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
     position: absolute;
     padding: 10px;
     left: 0;
@@ -625,50 +477,133 @@ button.add-note svg.icon {
     right: 0;
     height: 60px;
     z-index: 9;
-    min-width: 600px;
 }
 
-[dir='rtl'] #bar .button-wrap button {
-    float: right;
+.tool-group {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row nowrap;
+    width: 100%;
 }
-#bar .center-area,
-#bar .trailing-area {
-    min-width: 50%;
+.tool-group.leading-area {
+    flex-shrink: 2;
+    justify-content: flex-start;
 }
-.sidebar-collapsed #bar .leading-area,
-.sidebar-collapsed #bar .center-area,
-.sidebar-collapsed #bar .trailing-area {
-    min-width: 33.3333%;
+.tool-group.center-area {
+    justify-content: center;
 }
-#bar .center-area {
-    float: left;
+.tool-group.trailing-area {
+    justify-content: flex-start;
 }
-[dir='rtl'] #bar .center-area {
-    float: right;
+
+.tool-group > div {
+    display: flex;
+    margin: 0 5px;
 }
-.sidebar-collapsed #bar .center-area {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    float: none;
+.tool-group button {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: row nowrap;
+    padding: 0 10px;
+    min-width: 30px;
 }
-#bar .leading-area {
-    float: left;
+.tool-group button .icon {
+    flex: 0 0 20px;
+}
+.tool-group button .label {
+    flex: 0 1 auto;
+    padding: 0 5px;
+}
+
+button.save .count {
+    visibility: hidden;
+    display: inline-block;
+    border: 0px solid #ccc;
+    border-left-width: 1px;
+    padding: 0px 8px;
+    min-width: 32px;
+    text-align: center;
+}
+[dir='rtl'] button.save .count {
+    border-left-width: 0px;
+    border-right-width: 1px;
+}
+button.save.has-count .count {
+    visibility: visible;
+}
+
+/* if no count, shift label over where the count would be, preserving width */
+button.save .label {
+    margin-right: -12px;
+    margin-left: 15px;
+}
+[dir='rtl'] button.save .label {
+    margin-left: -12px;
+    margin-right: 15px;
+}
+button.save.has-count .label {
+    margin-right: 3px;
+    margin-left: 0;
+}
+[dir='rtl'] button.save.has-count .label {
+    margin-left: 3px;
+    margin-right: 0;
+}
+
+.help-wrap svg.icon.pre-text.add-note,
+button.add-note svg.icon {
+    height: 15px;
+    width: 15px;
+    color: rgba(0,0,0,0.25);
+    stroke: #333;
+    stroke-width: 60px;
+    margin-top: 3px;
+}
+button.add-note svg.icon {
+    margin-left: unset;
+    margin-right: 4px;
+}
+[dir='rtl'] button.add-note svg.icon {
+    margin-left: 4px;
+    margin-right: unset;
+}
+.help-wrap svg.icon.pre-text.add-note {
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.spinner {
+    opacity: .5;
+    display: flex;
+    flex-shrink: 2;
+    justify-content: flex-end;
+}
+.spinner img {
+    height: 40px;
+    width: 40px;
+    border-radius: 4px;
+    background: black;
+}
+[dir='rtl'] .spinner img {
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+
+
+#bar.narrow .tool-group {
+    width: unset;
+}
+#bar.narrow .spinner,
+#bar.narrow button .label {
     display: none;
 }
-[dir='rtl'] #bar .leading-area {
-    float: right;
-}
-.sidebar-collapsed #bar .leading-area {
-    display: inline-block;
-}
-#bar .trailing-area {
-    float: right;
-    text-align: right;
-}
-[dir='rtl'] #bar .trailing-area {
-    float: left;
-    text-align: left;
+#bar.narrow button .count {
+    border-left-width: 0;
+    border-right-width: 0;
 }
 
 
@@ -767,14 +702,6 @@ button.add-note svg.icon {
     justify-content: center;
 }
 
-.sidebar-component .body {
-    width: 100%;
-    overflow: auto;
-    top: 60px;
-    bottom: 0;
-    position: absolute;
-}
-
 
 /* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */
@@ -797,26 +724,6 @@ a.hide-toggle {
     padding-bottom: 5px;
 }
 
-#sidebar-resizer {
-    position: absolute;
-    top: 0;
-    right: -6px;
-    height: 100%;
-    width: 6px;
-    cursor: col-resize;
-}
-.sidebar-collapsed #sidebar-resizer {
-    /* make target wider to avoid the user accidentally resizing window */
-    width: 10px;
-    right: -10px;
-}
-[dir='rtl'] #sidebar-resizer {
-    right: auto;
-    left: -6px;
-}
-.sidebar-collapsed[dir='rtl'] #sidebar-resizer {
-    left: -10px;
-}
 
 /* Sidebar / Inspector
 ------------------------------------------------------- */
@@ -836,6 +743,28 @@ a.hide-toggle {
     border-left-width: 1px;
 }
 
+#sidebar-resizer {
+    position: absolute;
+    top: 0;
+    right: -6px;
+    height: 100%;
+    width: 6px;
+    cursor: col-resize;
+}
+[dir='rtl'] #sidebar-resizer {
+    right: auto;
+    left: -6px;
+}
+
+#sidebar.collapsed #sidebar-resizer {
+    /* make target wider to avoid the user accidentally resizing window */
+    width: 10px;
+    right: -10px;
+}
+[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
+    left: -10px;
+}
+
 .sidebar-component {
     position: absolute;
     top: 0;
@@ -844,6 +773,14 @@ a.hide-toggle {
     right: 0;
 }
 
+.sidebar-component .body {
+    width: 100%;
+    overflow: auto;
+    top: 60px;
+    bottom: 0;
+    position: absolute;
+}
+
 .panewrap {
     position: absolute;
     width: 200%;
@@ -931,6 +868,7 @@ a.hide-toggle {
 }
 
 
+
 /* Feature List / Search Results
 ------------------------------------------------------- */
 .feature-list  {
@@ -3005,6 +2943,8 @@ div.full-screen > button:hover {
     top: 60px;
     bottom: 30px;
     right: 0;
+    width: 33.3333%;
+    max-width: 400px;
     padding-bottom: 50px;
     overflow: hidden;
     z-index: -1;
@@ -3014,6 +2954,11 @@ div.full-screen > button:hover {
     right: auto !important;
 }
 
+.map-pane.help-wrap {
+    width: 50.0000%;
+    max-width: 600px;
+}
+
 .pane-heading {
     display: flex;
     flex-flow: row nowrap;
@@ -3812,6 +3757,10 @@ img.tile-debug {
     text-align: center;
 }
 
+.modal-section.buttons button {
+    min-width: 130px;
+}
+
 .modal-section.buttons .action {
     display: inline-block;
     margin: 0 10px;
@@ -4089,9 +4038,6 @@ svg.mouseclick use.right {
 .settings-modal textarea {
     height: 70px;
 }
-.settings-modal .buttons .button.col3 {
-    float: none;   /* undo float left */
-}
 
 .settings-custom-background .instructions-template {
     margin-bottom: 20px;
@@ -4494,12 +4440,12 @@ svg.mouseclick use.right {
 }
 
 /* Move over tooltips that are near the edge of screen */
-.add-point .tooltip .tooltip-arrow {
-    left: 60px;
+button.sidebar-toggle .tooltip .tooltip-arrow {
+    left: 32px;
 }
-[dir='rtl'] .add-point .tooltip .tooltip-arrow {
+[dir='rtl'] button.sidebar-toggle .tooltip .tooltip-arrow {
     left: auto;
-    right: 60px;
+    right: 32px;
 }
 
 li:first-of-type .badge .tooltip,
@@ -4616,19 +4562,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 }
 
 
-/* Media Queries
-------------------------------------------------------- */
-@media screen and (max-width: 1200px) {
-    .user-list { display: none !important; }
-}
-@media screen and (max-width: 1000px) {
-    #userLink { display: none !important; }
-}
-@media screen and (max-width: 900px) {
-    #scale-block { display: none !important; }
-}
-
-
 /* Scrollbars
  ----------------------------------------------------- */
 ::-webkit-scrollbar {
diff --git a/data/core.yaml b/data/core.yaml
index 47324ad14..167a7aec2 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -302,9 +302,9 @@ en:
   loading_auth: "Connecting to OpenStreetMap..."
   report_a_bug: Report a bug
   help_translate: Help translate
-  sidebar_button:
-    title: Sidebar
-    tooltip: Open the sidebar.
+  sidebar:
+    key: '`'
+    tooltip: Toggle the sidebar.
   feature_info:
     hidden_warning: "{count} hidden features"
     hidden_details: "These features are currently hidden: {details}"
@@ -1159,6 +1159,7 @@ en:
         background_switch: "Switch back to last background"
         map_data: "Show map data options"
         fullscreen: "Enter full screen mode"
+        sidebar: "Toggle sidebar"
         wireframe: "Toggle wireframe mode"
         minimap: "Toggle minimap"
       selecting:
diff --git a/data/shortcuts.json b/data/shortcuts.json
index fadc50fca..39a81889f 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -66,6 +66,10 @@
               "shortcuts": ["F", "F11"],
               "text": "shortcuts.browsing.display_options.fullscreen"
             },
+            {
+              "shortcuts": ["sidebar.key"],
+              "text": "shortcuts.browsing.display_options.sidebar"
+            },
             {
               "shortcuts": ["area_fill.wireframe.key"],
               "text": "shortcuts.browsing.display_options.wireframe"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 3fb345339..ea25622ca 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -383,9 +383,9 @@
         "loading_auth": "Connecting to OpenStreetMap...",
         "report_a_bug": "Report a bug",
         "help_translate": "Help translate",
-        "sidebar_button": {
-            "title": "Sidebar",
-            "tooltip": "Open the sidebar."
+        "sidebar": {
+            "key": "`",
+            "tooltip": "Toggle the sidebar."
         },
         "feature_info": {
             "hidden_warning": "{count} hidden features",
@@ -1339,6 +1339,7 @@
                     "background_switch": "Switch back to last background",
                     "map_data": "Show map data options",
                     "fullscreen": "Enter full screen mode",
+                    "sidebar": "Toggle sidebar",
                     "wireframe": "Toggle wireframe mode",
                     "minimap": "Toggle minimap"
                 },
diff --git a/modules/geo/extent.js b/modules/geo/extent.js
index bf30fd679..0b85158ea 100644
--- a/modules/geo/extent.js
+++ b/modules/geo/extent.js
@@ -20,7 +20,6 @@ export function geoExtent(min, max) {
     }
 }
 
-// $FlowFixMe
 geoExtent.prototype = new Array(2);
 
 _extend(geoExtent.prototype, {
diff --git a/modules/modes/select_data.js b/modules/modes/select_data.js
index 1e433660d..89cde781e 100644
--- a/modules/modes/select_data.js
+++ b/modules/modes/select_data.js
@@ -1,3 +1,6 @@
+
+import { geoBounds as d3_geoBounds } from 'd3-geo';
+
 import {
     event as d3_event,
     select as d3_select
@@ -12,11 +15,8 @@ import {
     behaviorSelect
 } from '../behavior';
 
-import {
-    modeDragNode,
-    modeDragNote
-} from '../modes';
-
+import { geoExtent } from '../geo';
+import { modeDragNode, modeDragNote } from '../modes';
 import { modeBrowse } from './browse';
 import { uiDataEditor } from '../ui';
 
@@ -69,8 +69,12 @@ export function modeSelectData(context, selectedDatum) {
 
         selectData();
 
-        context.ui().sidebar
-            .show(dataEditor.datum(selectedDatum));
+        var sidebar = context.ui().sidebar;
+        sidebar.show(dataEditor.datum(selectedDatum));
+
+        // expand the sidebar, avoid obscuring the data if needed
+        var extent = geoExtent(d3_geoBounds(selectedDatum));
+        sidebar.expand(sidebar.intersects(extent));
 
         context.map()
             .on('drawn.select-data', selectData);
diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js
index 36246a207..67ae6b1c5 100644
--- a/modules/modes/select_note.js
+++ b/modules/modes/select_note.js
@@ -105,8 +105,11 @@ export function modeSelectNote(context, selectedNoteID) {
 
         selectNote();
 
-        context.ui().sidebar
-            .show(noteEditor.note(note));
+        var sidebar = context.ui().sidebar;
+        sidebar.show(noteEditor.note(note));
+
+        // expand the sidebar, avoid obscuring the note if needed
+        sidebar.expand(sidebar.intersects(note.extent()));
 
         context.map()
             .on('drawn.select', selectNote);
diff --git a/modules/renderer/map.js b/modules/renderer/map.js
index 2878d8a48..2d699b862 100644
--- a/modules/renderer/map.js
+++ b/modules/renderer/map.js
@@ -662,13 +662,11 @@ export function rendererMap(context) {
 
     map.dimensions = function(_) {
         if (!arguments.length) return dimensions;
-        var center = map.center();
         dimensions = _;
         drawLayers.dimensions(dimensions);
         context.background().dimensions(dimensions);
         projection.clipExtent([[0, 0], dimensions]);
         mouse = utilFastMouse(supersurface.node());
-        setCenter(center);
 
         scheduleRedraw();
         return map;
diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js
index 77d516a6d..0767f283d 100644
--- a/modules/services/mapillary.js
+++ b/modules/services/mapillary.js
@@ -372,7 +372,7 @@ export default {
         defs.call(svgDefs(context).addSprites, ['mapillary-sprite']);
 
         // Register viewer resize handler
-        context.ui().on('photoviewerResize', function() {
+        context.ui().photoviewer.on('resize', function() {
             if (_mlyViewer) {
                 _mlyViewer.resize();
             }
diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js
index 40044e8ca..07ef328d4 100644
--- a/modules/services/openstreetcam.js
+++ b/modules/services/openstreetcam.js
@@ -327,7 +327,7 @@ export default {
 
 
         // Register viewer resize handler
-        context.ui().on('photoviewerResize', function(dimensions) {
+        context.ui().photoviewer.on('resize', function(dimensions) {
             imgZoom = d3_zoom()
                 .extent([[0, 0], dimensions])
                 .translateExtent([[0, 0], dimensions])
diff --git a/modules/services/streetside.js b/modules/services/streetside.js
index 8a0cd1b1e..d748d9251 100644
--- a/modules/services/streetside.js
+++ b/modules/services/streetside.js
@@ -626,7 +626,7 @@ export default {
 
 
         // Register viewer resize handler
-        context.ui().on('photoviewerResize', function() {
+        context.ui().photoviewer.on('resize', function() {
             if (_pannellumViewer) {
                 _pannellumViewer.resize();
             }
diff --git a/modules/ui/background.js b/modules/ui/background.js
index 3dbc1c454..6f91098b8 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -340,7 +340,7 @@ export function uiBackground(context) {
 
         var pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane col4 hide');
+            .attr('class', 'fillL map-pane hide');
 
         var paneTooltip = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')
diff --git a/modules/ui/confirm.js b/modules/ui/confirm.js
index 8eec4b6cd..a993f64c3 100644
--- a/modules/ui/confirm.js
+++ b/modules/ui/confirm.js
@@ -23,7 +23,7 @@ export function uiConfirm(selection) {
     modalSelection.okButton = function() {
         buttons
             .append('button')
-            .attr('class', 'button ok-button action col4')
+            .attr('class', 'button ok-button action')
             .on('click.confirm', function() {
                 modalSelection.remove();
             })
diff --git a/modules/ui/help.js b/modules/ui/help.js
index a8b5bbbbd..1d350be2d 100644
--- a/modules/ui/help.js
+++ b/modules/ui/help.js
@@ -384,7 +384,7 @@ export function uiHelp(context) {
 
 
         var pane = selection.append('div')
-            .attr('class', 'help-wrap map-pane fillL col6 hide');
+            .attr('class', 'help-wrap map-pane fillL hide');
 
         var tooltipBehavior = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 9ce38a042..dfd975773 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -37,6 +37,7 @@ import { uiSidebar } from './sidebar';
 import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
 import { uiStatus } from './status';
+import { uiTooltipHtml } from './tooltipHtml';
 import { uiUndoRedo } from './undo_redo';
 import { uiVersion } from './version';
 import { uiZoom } from './zoom';
@@ -44,7 +45,10 @@ import { uiCmd } from './cmd';
 
 
 export function uiInit(context) {
-    var uiInitCounter = 0;
+    var _initCounter = 0;
+    var _initCallback;
+    var _needWidth = {};
+
 
     function render(container) {
         container
@@ -74,6 +78,7 @@ export function uiInit(context) {
             .attr('id', 'content')
             .attr('class', 'active');
 
+        // Top toolbar
         var bar = content
             .append('div')
             .attr('id', 'bar')
@@ -90,56 +95,66 @@ export function uiInit(context) {
             .call(uiInfo(context))
             .call(uiNotice(context));
 
+        // Leading area button group (Sidebar toggle)
         var leadingArea = bar
             .append('div')
-            .attr('class', 'leading-area');
+            .attr('class', 'tool-group leading-area');
 
         var sidebarButton = leadingArea
             .append('div')
-            .attr('class', 'button-wrap sidebar-collapse')
             .append('button')
-            .attr('class', 'col12')
+            .attr('class', 'sidebar-toggle')
             .attr('tabindex', -1)
-            .on('click', ui.sidebar.toggleCollapse)
-            .call(tooltip().title(t('sidebar_button.tooltip')).placement('bottom'));
+            .on('click', ui.sidebar.toggle)
+            .call(tooltip()
+                .placement('bottom')
+                .html(true)
+                .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
+            );
+
         var iconSuffix = textDirection === 'rtl' ? 'right' : 'left';
         sidebarButton
-            .call(svgIcon('#iD-icon-sidebar-'+iconSuffix, 'pre-text'))
-            .append('span')
-            .attr('class', 'label')
-            .text(t('sidebar_button.title'));
+            .call(svgIcon('#iD-icon-sidebar-' + iconSuffix));
 
-        bar
+        leadingArea
             .append('div')
-            .attr('class', 'center-area')
-            .append('div')
-            .attr('class', 'modes button-wrap joined')
-            .call(uiModes(context), bar);
-
-        var trailingArea = bar
-            .append('div')
-            .attr('class', 'trailing-area');
-
-        trailingArea
-            .append('div')
-            .attr('class', 'full-screen')
+            .attr('class', 'full-screen bar-group')
             .call(uiFullScreen(context));
 
-        trailingArea
+
+        // Center area button group (Point/Line/Area/Note mode buttons)
+        bar
             .append('div')
-            .attr('class', 'spinner')
-            .call(uiSpinner(context));
+            .attr('class', 'tool-group center-area')
+            .append('div')
+            .attr('class', 'modes joined')
+            .call(uiModes(context), bar);
+
+
+        // Trailing area button group (Undo/Redo save buttons)
+        var trailingArea = bar
+            .append('div')
+            .attr('class', 'tool-group trailing-area');
 
         trailingArea
             .append('div')
-            .attr('class', 'button-wrap joined')
+            .attr('class', 'joined')
             .call(uiUndoRedo(context));
 
         trailingArea
             .append('div')
-            .attr('class', 'button-wrap save-wrap')
+            .attr('class', 'save-wrap')
             .call(uiSave(context));
 
+
+        // For now, just put spinner at the end
+        bar
+            .append('div')
+            .attr('class', 'spinner')
+            .call(uiSpinner(context));
+
+
+        // Map controls (appended to #bar, but absolutely positioned)
         var controls = bar
             .append('div')
             .attr('class', 'map-controls');
@@ -280,6 +295,7 @@ export function uiInit(context) {
         var pa = 80;  // pan amount
         var keybinding = d3_keybinding('main')
             .on('⌫', function() { d3_event.preventDefault(); })
+            .on(t('sidebar.key'), ui.sidebar.toggle)
             .on('←', pan([pa, 0]))
             .on('↑', pan([0, pa]))
             .on('→', pan([-pa, 0]))
@@ -294,7 +310,7 @@ export function uiInit(context) {
 
         context.enter(modeBrowse(context));
 
-        if (!uiInitCounter++) {
+        if (!_initCounter++) {
             if (!hash.startWalkthrough) {
                 context.container()
                     .call(uiSplash(context))
@@ -319,7 +335,7 @@ export function uiInit(context) {
                 });
         }
 
-        uiInitCounter++;
+        _initCounter++;
 
         if (hash.startWalkthrough) {
             hash.startWalkthrough = false;
@@ -336,10 +352,8 @@ export function uiInit(context) {
     }
 
 
-    var renderCallback;
-
     function ui(node, callback) {
-        renderCallback = callback;
+        _initCallback = callback;
         var container = d3_select(node);
         context.container(container);
         context.loadLocale(function(err) {
@@ -359,7 +373,7 @@ export function uiInit(context) {
             if (!err) {
                 context.container().selectAll('*').remove();
                 render(context.container());
-                if (renderCallback) renderCallback();
+                if (_initCallback) _initCallback();
             }
         });
     };
@@ -369,13 +383,48 @@ export function uiInit(context) {
 
     ui.photoviewer = uiPhotoviewer(context);
 
-    ui.onResize = function() {
+    ui.onResize = function(withPan) {
+        var map = context.map();
         var content = d3_select('#content');
         var mapDimensions = utilGetDimensions(content, true);
-        context.map().dimensions(mapDimensions);
+
+        if (withPan !== undefined) {
+            map.redrawEnable(false);
+            map.pan(withPan);
+            map.redrawEnable(true);
+        }
+        map.dimensions(mapDimensions);
 
         ui.photoviewer.onMapResize();
+
+        // check if header or footer have overflowed
+        ui.checkOverflow('#bar');
+        ui.checkOverflow('#footer');
     };
 
+
+    // Call checkOverflow when resizing or whenever the contents change.
+    ui.checkOverflow = function(selector, reset) {
+        if (reset) {
+            delete _needWidth[selector];
+        }
+
+        var element = d3_select(selector);
+        var scrollWidth = element.property('scrollWidth');
+        var clientWidth = element.property('clientWidth');
+        var needed = _needWidth[selector] || scrollWidth;
+
+        if (scrollWidth > clientWidth) {    // overflow happening
+            element.classed('narrow', true);
+            if (!_needWidth[selector]) {
+                _needWidth[selector] = scrollWidth;
+            }
+
+        } else if (scrollWidth >= needed) {
+            element.classed('narrow', false);
+        }
+    };
+
+
     return ui;
 }
diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js
index 369f8554f..9f4f96e53 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -578,7 +578,7 @@ export function uiMapData(context) {
 
         var pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane col4 hide');
+            .attr('class', 'fillL map-pane hide');
 
         var paneTooltip = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')
diff --git a/modules/ui/modes.js b/modules/ui/modes.js
index 3ccd5dcaf..4aa4f369a 100644
--- a/modules/ui/modes.js
+++ b/modules/ui/modes.js
@@ -125,7 +125,7 @@ export function uiModes(context) {
             buttonsEnter
                 .each(function(d) {
                     d3_select(this)
-                        .call(svgIcon('#iD-icon-' + d.button, 'pre-text'));
+                        .call(svgIcon('#iD-icon-' + d.button));
                 });
 
             buttonsEnter
@@ -133,11 +133,14 @@ export function uiModes(context) {
                 .attr('class', 'label')
                 .text(function(mode) { return mode.title; });
 
+            // if we are adding/removing the buttons, check if toolbar has overflowed
+            if (buttons.enter().size() || buttons.exit().size()) {
+                context.ui().checkOverflow('#bar', true);
+            }
+
             // update
             buttons = buttons
                 .merge(buttonsEnter)
-                .classed('col3', showNotes)    // 25%
-                .classed('col4', !showNotes)   // 33%
                 .property('disabled', function(d) {
                     return d.id === 'add-note' ? !notesEditable() : !editable();
                 });
diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js
index 9be65f7e9..ed20dbba6 100644
--- a/modules/ui/photoviewer.js
+++ b/modules/ui/photoviewer.js
@@ -11,7 +11,7 @@ import { services } from '../services';
 
 export function uiPhotoviewer(context) {
 
-    var dispatch = d3_dispatch('photoviewerResize');
+    var dispatch = d3_dispatch('resize');
 
     function photoviewer(selection) {
         selection
@@ -30,7 +30,7 @@ export function uiPhotoviewer(context) {
             .attr('class', 'resize-handle-xy')
             .on(
                 'mousedown',
-                buildResizeListener(selection, 'photoviewerResize', dispatch, { resizeOnX: true, resizeOnY: true })
+                buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true, resizeOnY: true })
             );
 
         selection
@@ -38,7 +38,7 @@ export function uiPhotoviewer(context) {
             .attr('class', 'resize-handle-x')
             .on(
                 'mousedown',
-                buildResizeListener(selection, 'photoviewerResize', dispatch, { resizeOnX: true })
+                buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true })
             );
 
         selection
@@ -46,7 +46,7 @@ export function uiPhotoviewer(context) {
             .attr('class', 'resize-handle-y')
             .on(
                 'mousedown',
-                buildResizeListener(selection, 'photoviewerResize', dispatch, { resizeOnY: true })
+                buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true })
             );
 
 
@@ -117,7 +117,7 @@ export function uiPhotoviewer(context) {
                 .style('width', setPhotoDimensions[0] + 'px')
                 .style('height', setPhotoDimensions[1] + 'px');
 
-            dispatch.call('photoviewerResize', photoviewer, setPhotoDimensions);
+            dispatch.call('resize', photoviewer, setPhotoDimensions);
         }
     };
 
diff --git a/modules/ui/save.js b/modules/ui/save.js
index fa23d3025..09d6e5d08 100644
--- a/modules/ui/save.js
+++ b/modules/ui/save.js
@@ -80,15 +80,15 @@ export function uiSave(context) {
 
         var button = selection
             .append('button')
-            .attr('class', 'save col12 disabled')
+            .attr('class', 'save disabled')
             .attr('tabindex', -1)
             .on('click', save)
             .call(tooltipBehavior);
 
         button
-            .append('div')
-            .attr('class', 'save-inner-wrap')
-            .call(svgIcon('#iD-icon-save', 'pre-text'))
+            .call(svgIcon('#iD-icon-save'));
+
+        button
             .append('span')
             .attr('class', 'label')
             .text(t('save.title'));
diff --git a/modules/ui/settings/custom_background.js b/modules/ui/settings/custom_background.js
index 9b2fc4e05..7af7365a5 100644
--- a/modules/ui/settings/custom_background.js
+++ b/modules/ui/settings/custom_background.js
@@ -41,12 +41,12 @@ export function uiSettingsCustomBackground(context) {
             .property('value', _currSettings.template);
 
 
-        // insert a cancel button, and adjust the button widths
+        // insert a cancel button
         var buttonSection = modal.select('.modal-section.buttons');
 
         buttonSection
             .insert('button', '.ok-button')
-            .attr('class', 'button col3 cancel-button secondary-action')
+            .attr('class', 'button cancel-button secondary-action')
             .text(t('confirm.cancel'));
 
 
@@ -54,8 +54,6 @@ export function uiSettingsCustomBackground(context) {
             .on('click.cancel', clickCancel);
 
         buttonSection.select('.ok-button')
-            .classed('col3', true)
-            .classed('col4', false)
             .attr('disabled', isSaveDisabled)
             .on('click.save', clickSave);
 
diff --git a/modules/ui/settings/custom_data.js b/modules/ui/settings/custom_data.js
index 090a9ec42..0ba28175f 100644
--- a/modules/ui/settings/custom_data.js
+++ b/modules/ui/settings/custom_data.js
@@ -70,12 +70,12 @@ export function uiSettingsCustomData(context) {
             .property('value', _currSettings.url);
 
 
-        // insert a cancel button, and adjust the button widths
+        // insert a cancel button
         var buttonSection = modal.select('.modal-section.buttons');
 
         buttonSection
             .insert('button', '.ok-button')
-            .attr('class', 'button col3 cancel-button secondary-action')
+            .attr('class', 'button cancel-button secondary-action')
             .text(t('confirm.cancel'));
 
 
@@ -83,8 +83,6 @@ export function uiSettingsCustomData(context) {
             .on('click.cancel', clickCancel);
 
         buttonSection.select('.ok-button')
-            .classed('col3', true)
-            .classed('col4', false)
             .attr('disabled', isSaveDisabled)
             .on('click.save', clickSave);
 
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index a94004f17..cf5064bdc 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -1,6 +1,8 @@
 import _throttle from 'lodash-es/throttle';
 
 import { drag as d3_drag } from 'd3-drag';
+import { interpolateNumber as d3_interpolateNumber } from 'd3-interpolate';
+
 import {
     select as d3_select,
     event as d3_event,
@@ -32,43 +34,68 @@ export function uiSidebar(context) {
 
 
     function sidebar(selection) {
+        var container = d3_select('#id-container');
+        var minWidth = 280;
+        var sidebarWidth;
+        var containerWidth;
+        var dragOffset;
 
         var resizer = selection
             .append('div')
             .attr('id', 'sidebar-resizer');
 
-        // set the initial width constraints
-        selection.style('min-width', '280px');
-        selection.style('max-width', '400px');
-        selection.style('width', '33.3333%');
+        // Set the initial width constraints
+        selection
+            .style('min-width', minWidth + 'px')
+            .style('max-width', '400px')
+            .style('width', '33.3333%');
 
-        var container = d3_select('#id-container');
         resizer.call(d3_drag()
             .container(container.node())
+            .on('start', function() {
+                // offset from edge of sidebar-resizer
+                dragOffset = d3_event.sourceEvent.offsetX - 1;
+
+                sidebarWidth = selection.node().getBoundingClientRect().width;
+                containerWidth = container.node().getBoundingClientRect().width;
+                var widthPct = (sidebarWidth / containerWidth) * 100;
+                selection
+                    .style('width', widthPct + '%')    // lock in current width
+                    .style('max-width', '85%');        // but allow larger widths
+            })
             .on('drag', function() {
+                var isRTL = (textDirection === 'rtl');
+                var xMarginProperty = isRTL ? 'margin-right' : 'margin-left';
 
-                var containerWidthPx = container.node().getBoundingClientRect().width;
+                var x = d3_event.x - dragOffset;
+                sidebarWidth = isRTL ? containerWidth - x : x;
 
-                var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
+                var isCollapsed = selection.classed('collapsed');
+                var shouldCollapse = sidebarWidth < minWidth;
 
-                // subtact 1px so the mouse stays in the div and maintains the col-resize cursor
-                var newWidthPx = textDirection === 'rtl' ? containerWidthPx - d3_event.x-1 : d3_event.x-1;
+                selection.classed('collapsed', shouldCollapse);
 
-                var shouldCollapse = newWidthPx < 280;
-                container.classed('sidebar-collapsed', shouldCollapse);
-                // allow large widths
-                selection.style('max-width', '85%');
                 if (shouldCollapse) {
-                    selection.style(xMarginProperty,'-400px')
-                        .style('width', '400px');
-                }
-                else {
+                    if (!isCollapsed) {
+                        selection
+                            .style(xMarginProperty, '-400px')
+                            .style('width', '400px');
 
-                    var newWidthPercent = (newWidthPx / containerWidthPx) * 100;
-                    selection.style(xMarginProperty, null)
-                        .style('width', newWidthPercent+'%');
+                        context.ui().onResize([sidebarWidth - d3_event.dx, 0]);
+                    }
+
+                } else {
+                    var widthPct = (sidebarWidth / containerWidth) * 100;
+                    selection
+                        .style(xMarginProperty, null)
+                        .style('width', widthPct + '%');
+
+                    if (isCollapsed) {
+                        context.ui().onResize([-sidebarWidth, 0]);
+                    } else {
+                        context.ui().onResize([-d3_event.dx, 0]);
+                    }
                 }
-                context.ui().onResize();
             })
         );
 
@@ -138,10 +165,23 @@ export function uiSidebar(context) {
         sidebar.hover = _throttle(hover, 200);
 
 
+        sidebar.intersects = function(extent) {
+            var rect = selection.node().getBoundingClientRect();
+            return extent.intersects([
+                context.projection.invert([0, rect.height]),
+                context.projection.invert([rect.width, 0])
+            ]);
+        };
+
+
         sidebar.select = function(id, newFeature) {
             if (!_current && id) {
-                // uncollapse the sidebar to show the editor
-                sidebar.toggleCollapse(false);
+                // uncollapse the sidebar
+                if (selection.classed('collapsed')) {
+                    var entity = context.entity(id);
+                    var extent = entity.extent(context.graph());
+                    sidebar.expand(sidebar.intersects(extent));
+                }
 
                 featureListWrap
                     .classed('inspector-hidden', true);
@@ -195,59 +235,85 @@ export function uiSidebar(context) {
             _current = null;
         };
 
-        sidebar.toggleCollapse = function(shouldCollapse) {
 
-            if (d3_event && typeof d3_event.preventDefault === 'function') {
-                d3_event.preventDefault();
-            }
-
-            var container = d3_select('#id-container');
-            var collapsing;
-            var isCollapsed = container.classed('sidebar-collapsed');
-            if (typeof shouldCollapse !== 'undefined') {
-                if (shouldCollapse === isCollapsed) {
-                    return;
-                }
-                collapsing = shouldCollapse;
-            } else {
-                collapsing = !isCollapsed;
-            }
-            var sidebar = d3_select('#sidebar');
-            var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
-            if (collapsing) {
-                var preSidebarWidthInPx = sidebar.node().getBoundingClientRect().width;
-                sidebar.style('width', preSidebarWidthInPx+'px');
-                sidebar.transition()
-                    .style('width', '400px')
-                    .style(xMarginProperty,'-400px')
-                    .on('end',function(){
-                        context.ui().onResize();
-                    });
-                    container.classed('sidebar-collapsed', true);
-            }  else {
-                var containerWidthPx = container.node().getBoundingClientRect().width;
-                var postSidebarWidthInPx = Math.max(containerWidthPx*0.333333, 280);
-                sidebar.transition()
-                    .style('width', postSidebarWidthInPx)
-                    .style(xMarginProperty, '0px')
-                    .on('end',function(){
-                        sidebar.style('width', '33.3333%');
-                        context.ui().onResize();
-                    });
-                    container.classed('sidebar-collapsed', false);
+        sidebar.expand = function(moveMap) {
+            if (selection.classed('collapsed')) {
+                sidebar.toggle(moveMap);
             }
         };
+
+
+        sidebar.collapse = function(moveMap) {
+            if (!selection.classed('collapsed')) {
+                sidebar.toggle(moveMap);
+            }
+        };
+
+
+        sidebar.toggle = function(moveMap) {
+            var e = d3_event;
+            if (e && e.sourceEvent) {
+                e.sourceEvent.preventDefault();
+            } else if (e) {
+                e.preventDefault();
+            }
+
+            var isCollapsed = selection.classed('collapsed');
+            var isCollapsing = !isCollapsed;
+            var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
+
+            sidebarWidth = selection.node().getBoundingClientRect().width;
+
+            // switch from % to px
+            selection.style('width', sidebarWidth + 'px');
+
+            var startMargin, endMargin, lastMargin;
+            if (isCollapsing) {
+                startMargin = lastMargin = 0;
+                endMargin = -sidebarWidth;
+            } else {
+                startMargin = lastMargin = -sidebarWidth;
+                endMargin = 0;
+            }
+
+            selection.transition()
+                .style(xMarginProperty, endMargin + 'px')
+                .tween('panner', function() {
+                    var i = d3_interpolateNumber(startMargin, endMargin);
+                    return function(t) {
+                        var dx = lastMargin - Math.round(i(t));
+                        lastMargin = lastMargin - dx;
+                        context.ui().onResize(moveMap ? undefined : [dx, 0]);
+                    };
+                })
+                .on('end', function() {
+                    selection.classed('collapsed', isCollapsing);
+
+                    // switch back from px to %
+                    if (!isCollapsing) {
+                        var containerWidth = container.node().getBoundingClientRect().width;
+                        var widthPct = (sidebarWidth / containerWidth) * 100;
+                        selection
+                            .style(xMarginProperty, null)
+                            .style('width', widthPct + '%');
+                    }
+                });
+        };
+
         // toggle the sidebar collapse when double-clicking the resizer
-        resizer.on('dblclick', sidebar.toggleCollapse);
+        resizer.on('dblclick', sidebar.toggle);
     }
 
 
     sidebar.hover = function() {};
     sidebar.hover.cancel = function() {};
+    sidebar.intersects = function() {};
     sidebar.select = function() {};
     sidebar.show = function() {};
     sidebar.hide = function() {};
-    sidebar.toggleCollapse = function() {};
+    sidebar.expand = function() {};
+    sidebar.collapse = function() {};
+    sidebar.toggle = function() {};
 
     return sidebar;
 }
diff --git a/modules/ui/undo_redo.js b/modules/ui/undo_redo.js
index 159f74c9a..e57a93140 100644
--- a/modules/ui/undo_redo.js
+++ b/modules/ui/undo_redo.js
@@ -48,7 +48,7 @@ export function uiUndoRedo(context) {
             .data(commands)
             .enter()
             .append('button')
-            .attr('class', function(d) { return 'col6 disabled ' + d.id + '-button'; })
+            .attr('class', function(d) { return 'disabled ' + d.id + '-button'; })
             .on('click', function(d) { return d.action(); })
             .call(tooltipBehavior);