How to create popup scrollable responsive table with varying amount of data?

Question

I am trying to create popup scrollable table, ideally responsive(didn't achieve it for now). Just body should be scrollable. The problem is: I set height to make body scrollable. But sometimes data from server isn't enough for height, so layout mess.

const competitorLots = [];

const Popup = () => {
  return (
    <div className="popup">
      <table className="scrollable-table popup-table">
        <thead>
          <tr>
            <th>Наименование объявления</th>
            <th>Наименование и описание лота</th>
            <th>Дата окончания приема заявок</th>
            <th>Кол-во</th>
          </tr>
        </thead>
        <tbody>
          {competitorLots?.map((competitorLot, index) => (
            <tr key={index}>
              <td>{competitorLot.lot_name}</td>
              <td>{competitorLot.lot_description}</td>
              <td>
                {moment(competitorLot.trd_buy_end_date).format("YYYY-MM-DD")}
              </td>
              <td>{competitorLot.lot_count}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// mock competitors
for (let i = 0; i < 100; i++) {
  competitorLots.push({
    lot_name: `name${i}`,
    lot_description: `description${i}`,
    trd_buy_end_date: new Date(Date.now() + 111586347 * i),
    lot_count: Math.ceil(Math.random() * 1000)
    
  });
}

// mock moment
const moment = (d) => ({
  format: (f) => d.toLocaleDateString('en-CA')
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Popup />);

:root {
  --popup-adname-column-width: 180px;
  --enddate-column-width: 120px;
  --popup-amount-column-width: 80px;
}

.popup {
    position: fixed;
    top: 10%;
    left: 10%;
    visibility: visible;
    z-index: 1;
  }

.scrollable-table {
  display: inline-grid;
  height: 500px;
  margin: 0;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}
.scrollable-table thead {
  grid-area: head-fixed;
}

.scrollable-table tbody {
  grid-area: body-scrollable;
  overflow-y: scroll;
}

.popup-table th:first-child {
  min-width: var(--popup-adname-column-width);
  max-width: var(--popup-adname-column-width);
}

.popup-table td:first-child {
  min-width: var(--popup-adname-column-width);
  max-width: var(--popup-adname-column-width);
}

.popup-table th:nth-child(2) {
  min-width: var(--popup-adname-column-width);
  max-width: var(--popup-adname-column-width);
}

.popup-table td:nth-child(2) {
  min-width: var(--popup-adname-column-width);
  max-width: var(--popup-adname-column-width);
}

.popup-table th:nth-child(3) {
  min-width: var(--enddate-column-width);
  max-width: var(--enddate-column-width);
}

.popup-table td:nth-child(3) {
  min-width: var(--enddate-column-width);
  max-width: var(--enddate-column-width);
}

.popup-table th:nth-child(4) {
  min-width: var(--popup-amount-column-width);
  max-width: var(--popup-amount-column-width);
}

.popup-table td:nth-child(4) {
  min-width: var(--popup-amount-column-width);
  max-width: var(--popup-amount-column-width);
}

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

The only solution I see is to change height of table based on number of rows, but don't like this solution. And for now responsiveness is not achieved. Is it possible to meet all requirement?