diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index 14308f6..ac34bd9 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -2,11 +2,14 @@ .maputnik-layer-list { height: 100%; overflow: auto; + display: flex; + flex-direction: column; &-header { padding: $margin-2 $margin-2 $margin-3; @include flex-row; + flex: 0 0; > * { vertical-align: middle; @@ -25,6 +28,9 @@ padding: 0; margin: 0; padding-bottom: $margin-5; + flex: 1; + overflow-x: hidden; + overflow-y: auto; } &-item-handle { diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss index 340c789..238ab81 100644 --- a/src/styles/_scrollbar.scss +++ b/src/styles/_scrollbar.scss @@ -1,5 +1,4 @@ -// 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: 8px; diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 0c76c2d..7b21d7a 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -17,7 +17,7 @@ text-decoration: none; display: block; flex: 0 0 190px; - width: 190px; + width: 200px; text-align: left; background-color: $color-black; padding: $margin-2;