And in the meantime, you could check out the Stylus extension for some ways to better display items on the map toolbar. I think there's a few different options in the list there. Here is the code I am currently using if you're interested (and a before & after comparison): /*Compact Page Tab */
#page-toolbar {
height: 290px;
max-height: 100% !important;
width: calc(100% - 375px) !important;
overflow: hidden;
left: 40px;
}
/*Responsive page toolbar size*/
/*sets the page toolbar and the container in it to size their height as needed based on their content*/
#page-toolbar.closed{
top:-1320px !important;/*this custom css seems to interfere with the JS based animation of the toolbar opening and closing. This makes sure that the page toolbar is properly placed when closed*/
height: auto !important;
}
/*End responsive toolbar*/
#page-toolbar .container {
#page-toolbar .height {
height: 300px !important
}
*/
#page-toolbar .container {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
height: 100%;
padding-left: 0;
padding-right: 0;
}
#page-toolbar .pages {
flex-wrap: wrap !important;
}
#page-toolbar .pages .availablepage {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
width: 80px;
}
#page-toolbar .pages .availablepage img.pagethumb {
left: 50%;
margin-top: 0;
max-height: 75px;
max-width: 75px;
position: absolute;
top: 5px;
transform: translate(-50%);
}
#page-toolbar .pages .availablepage span {
bottom: 0;
max-height: 100%;
overflow-wrap: anywhere;
position: absolute;
white-space: normal;
}
#page-toolbar .handle.showtip {
position: fixed;
top: 2px !important;
left: 6px !important;
}
#floatingtoolbar {
position: fixed;
top: 37px !important;
left: 5px !important;
}
#page-toolbar > div.handle.showtip {
border-radius: 3px;
}
/*Zoom Slider Tweaks */
/*
#zoomclick {
display: none !important;
}
*/
#zoomclick:not(.zoomvalue) {
position: fixed;
left: 2px;
height: 0px;
}
.zoomValue {
display: block;
font-size: 12px;
font-family:"arial black";
background-color: #22222247;
padding: 0px;
position: absolute;
top: 39px !important;
}
.zoomplus, .zoomminus {
display: none !important;
font-size: 7px;
}
#zoomclick .btn {
display: none !important;
}
#zoomslider {
display: none !important;
}
#zoomslider a.ui-slider-handle.ui-state-default.ui-corner-all {
display: none !important;
}
