title: Which Leaflet library or workaround to control toolbar size
body: <p>I need to change the styling of the toolbar like the size of the button to have a bigger touch area for mobile (draw toolbar and other controls).</p>
  
  <p>I already tried to change the size to 48px for width and height of toolbar button using css.</p>
  
  <p>Current css : </p>
  
  <pre class="lang-css prettyprint-override"><code>/*
    ##Device = Mobile, Tablet
  */
  @media (max-width: 1024px) {
      .leaflet-bar a, a.leaflet-toolbar-icon {
          width: 44px !important;
          height: 44px !important;
          font-size: 20px !important;
          line-height: 45px !important;
      }
      .leaflet-touch .leaflet-draw-actions a {
          font-size: 20px;
          line-height: 44px;
          height: 44px;
      }
      .leaflet-control-zoom-display {
          width: 45px;
          height: 45px;
          font-size: 18px;
          line-height: 30px;
      }
      .leaflet-touch .leaflet-control-layers-toggle {
          width: 44px;
          height: 44px;
      }
  }
  </code></pre>
  
  <p>When I change the size in the css way, the toolbar is not responsive anymore (leaflet-draw toolbar background should fit size)</p>
  
  <p>It also glitches when you click on a toolbar button and it shows the horizontal sub-toolbar (text is overlapping).</p>
  
  <p><img src="https://i.stack.imgur.com/jfGDg.png" alt="My problem picture"></p>
  
  <p>Is anyone know a plugin or a way to have a bigger touch area for mobile?</p>