[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

2024-12-30.16-15-40.mp4

[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;
}