[Bug] Kepler GL has a good amount of whitespace on bottom

[indranildeveloper]

Description In my 2K LG monitor, there is a very big white space on the bottom.

To Reproduce Steps to reproduce the behavior:

Here is the code I used:

import { KeplerGl } from "@kepler.gl/components";
import { AutoSizer } from "react-virtualized";

function App() {
  return (
    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
      <AutoSizer>
        {({ height, width }) => (
          <KeplerGl
           mapboxApiAccessToken=""
            id="map"
            width={width}
            height={height}
          />
        )}
      </AutoSizer>
    </div>
  );
}

export default App;

Screen Recording

https://github.com/user-attachments/assets/7bcea96d-0e63-470f-a699-ddf18bba9374

[AlfredoRuizXcaliburmp]

That's the mapboxgl-children you have to add to the css:

.maplibregl-map > div:last-child { display: none; }

That will make it hide and eliminate your problem. It would also be good if you added the following to avoid the outer margin, the following code resets the margin and padding:

• { box-sizing: border-box; margin: 0; padding: 0; }

If you want to fine-tune the right space now:

body { width: 100%; height: 100%; overflow: hidden; }

[kisamoto]

This is also present in the example get-started-vite but not in other examples. I think what's missing is the CSS files from MapLibre.

I solved this by:

npm install maplibre-gl

and then import the CSS file in my main.tsx file:

// Render the Maplibre styles
import 'maplibre-gl/dist/maplibre-gl.css';

[indranildeveloper]

Thanks!