Making the "active part" or "view" of the map smaller than the actual height of the map in leaflet?

I am making a navigation app in react-leaflet. I would like the design to be styled so that the search bar is on top of the map like so:

as I have no reputation I cannot post the image, sorry...

https://github.com/lyoungblood14/myrepo1/blob/main/annotation.png

However, as you can see from the situation, this of course causes the leaflet controls to overlay the search bar. This has: a parent .page-div, and three siblings .search-div, .map-div, and .info-div [currently not visible]. The parent .page-div has position: relative, and the children have position: absolute.

This may be able to be solved via Ihttps://groups.google.com/g/leaflet-js/c/rKMZX3PKFuI, but I'm the working more on the styling and don't really know jsx. This solution also seems impossible because I worry that it will cause problems in the long run, i.e. not being able to properly center a leaflet popup on the page.

Is there a way to make the "active part" or "view" of the map smaller than the actual height of the map? For example:

https://github.com/lyoungblood14/myrepo1/blob/main/iPhone%208%20Plus%20-%201.png

This would ideally mean that e.g. a centering function, or showing our routes, the app would center on the action area, not the whole map.

EDIT: I'm hoping to explore this...

https://github.com/Leaflet/Leaflet/issues/859

Solution

I solved part of my problem in this way: using leaflet-active-area plugin, I followed @benistary's suggestion here and added:

return (<div id="map-div">
        <MapContainer
          center={initialCenter}
          zoom={13}
          style={{ height: "100%", width: "100%" }}
          zoomControl={false}
          minZoom={8}
        >
          <MapContent></MapContent>
          
          ...OTHER STUFF...
        
        </MapContainer>
      </div>
      )
      
      
      
const MapContent = () => {
  const map = useMap();

  useEffect(() => {
    // Use setActiveArea in useEffect to ensure it runs after the map is initialized
    map?.setActiveArea("activeArea", true, true);
  }, [map]);
}

/*style active area*/

.activeArea {
  width: 100%;
  top: 19%;
  position: absolute;
  /* position: sticky; */
  right: 0%;
  min-height: 80%;
  border: 10px blue solid;
  z-index: 5000;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

The key is that the map should be within MapContainer and you need MapContent to set the active area. It was important that the const code comes after the return so the map is initialized first.

However, this does not affect the placement of the leaflet-bar elements...