I’m working on a project in NextJS using NextUI and TailwindCSS. I have a section to view the shifts, which contains a table and several filters. When I remove the table, everything else looks perfect, but when I add the table, everything appears smaller, as if everything adjusts to the size of the table, and it looks terrible. I tried adding overflow-x-auto and several other things, but nothing works. The idea is for everything to adapt to the size of the device.

<div className='flex flex-col p-4'>
  <p className="text-2xl font-semibold mb-4">Turnos</p>
  <div className="mb-4">
    <Button color="primary" onClick={() => router.push('/dashboard/shifts/create')} variant="ghost" className="w-auto">
      Nuevos turnos
    </Button>
  </div>
  <div className="flex flex-col md:flex-row items-center mb-4 gap-4 w-full">
    <Autocomplete
      label="Servicio"
      defaultItems={services}
      placeholder="Seleccionar servicio"
      onSelectionChange={(value) => setSelectedService(value)}
      selectedKey={selectedService}
      className="w-full md:w-2/3"
      size="sm"
    >
      {services.map((service) => (
        <AutocompleteItem key={service.id} value={service.id}>
          {service.name}
        </AutocompleteItem>
      ))}
    </Autocomplete>
    <DatePicker
      label="Fecha"
      isDisabled={!selectedService}
      onChange={(date) => setSelectedDate(date)}
      value={selectedDate}
      className="w-full md:w-auto"
      size="sm"
    />
    <Select
      label="Filtrar por estado"
      value={stateFilter}
      onChange={(e) => setStateFilter(e.target.value)}
      size="sm"
      isDisabled={!selectedService}
    >
      <SelectItem key="all">Todos</SelectItem>
      {states.map((state) => (
        <SelectItem key={state.id.toString()}>{state.name}</SelectItem>
      ))}
    </Select>
  </div>
  <div className="overflow-x-auto grid w-full">
    <Table
      aria-label="Turnos"
      isStriped
      className="w-full"
      bottomContent={
        <div className='flex w-full justify-center'>
          <Pagination
            isCompact
            showControls
            showShadow
            color="primary"
            page={page}
            total={Math.ceil(rows.length / rowsPerPage)}
            onChange={(newPage) => setPage(newPage)}
          />
        </div>
      }
    >
      <TableHeader columns={columns}>
        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
      </TableHeader>
      <TableBody items={rows.slice((page - 1) * rowsPerPage, page * rowsPerPage)}>
        {(item) => (
          <TableRow key={item.key}>
            {(columnKey) => (
              <TableCell key={`${item.key}-${columnKey}`}>
                {item[columnKey]}
              </TableCell>
            )}
          </TableRow>
        )}
      </TableBody>
    </Table>
  </div>
</div>