diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 40235fc..3a57ca0 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -107,40 +107,44 @@ export default class Toolbar extends React.Component {
isOpen={this.state.isOpen.sources}
onOpenToggle={this.toggleModal.bind(this, 'sources')}
/>
-
-
- Maputnik
-
-
-
- Open
-
-
-
- Export
-
-
-
- Sources
-
-
-
- Style Settings
-
-
-
-
- { this.props.inspectModeEnabled && Map Mode }
- { !this.props.inspectModeEnabled && Inspect Mode }
-
-
-
-
- Help
-
+
+
+
+ Maputnik
+
+
+
+
+ Open
+
+
+
+ Export
+
+
+
+ Sources
+
+
+
+ Style Settings
+
+
+
+
+ { this.props.inspectModeEnabled && Map Mode }
+ { !this.props.inspectModeEnabled && Inspect Mode }
+
+
+
+
+ Help
+
+
+
}
}
diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss
index c305879..8b2156d 100644
--- a/src/styles/_scrollbar.scss
+++ b/src/styles/_scrollbar.scss
@@ -1,12 +1,15 @@
-::-webkit-scrollbar {
- background-color: #26282e;
- width: 5px;
-}
+// HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar
+div:not(.maputnik-toolbar__actions) {
+ &::-webkit-scrollbar {
+ background-color: #26282e;
+ width: 5px;
+ }
-::-webkit-scrollbar-thumb {
- border-radius: 6px;
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- background-color: #666;
- padding-left: 2px;
- padding-right: 2px;
+ &::-webkit-scrollbar-thumb {
+ border-radius: 6px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #666;
+ padding-left: 2px;
+ padding-right: 2px;
+ }
}
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 77dbea8..3e4ed2c 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -54,3 +54,17 @@
display: inline;
margin-left: $margin-1;
}
+
+.maputnik-toolbar-logo {
+ flex: 0 0 140px;
+}
+
+.maputnik-toolbar__inner {
+ display: flex;
+}
+
+.maputnik-toolbar__actions {
+ white-space: nowrap;
+ flex: 1;
+ overflow-y: auto;
+}