How to increase height of a table cell if the content overflows - reactjs

Question

I'm coding a credit log system in react using firebase realtime database. I have something like this:
and I'd like to have it so that when the content is really long it doesn't result in a scroll bar but rather causes the height of the cell to increase. I've tried doing some messing around but I'm not so proficient in tailwind. I've attached the code below.
import React, {useState, useEffect} from "react";
import PropTypes from "prop-types";
import firebase from "Firebase"
import TableDropdown from "components/Dropdowns/TableDropdown.js";
// Todo: Make this more module through adding component/variable for each cell
export default function MyCreditLog({ color }) {
const [creditData, setCreditData] = useState([]);
useEffect(() => {
let ref = firebase.database().ref("/creditlogs/"+firebase.auth().currentUser.uid)
console.log(firebase.auth().currentUser.uid)
ref.on("value", snapshot => {
const state = snapshot.val()
setCreditData(Object.values(state))
console.log(state)
})
}, [])
return (
<>
<div
className={
"relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded " +
(color === "light" ? "bg-white" : "bg-blue-900 text-white")
}
>
<div className="rounded-t mb-0 px-4 py-3 border-0">
<div className="flex flex-wrap items-center">
<div className="relative w-full px-4 max-w-full flex-grow flex-1">
<h3
className={
"font-semibold text-lg " +
(color === "light" ? "text-gray-800" : "text-white")
}
>
My Credit Log
</h3>
</div>
</div>
</div>
<div className="block w-full overflow-x-auto">
{/* Projects table */}
<table className="items-center w-full bg-transparent border-collapse">
<thead>
<tr className="overflow-x-hidden">
<th
className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
(color === "light"
? "bg-gray-100 text-gray-600 border-gray-200"
: "bg-blue-800 text-blue-300 border-blue-700")
}
>
Date
</th>
<th
className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
(color === "light"
? "bg-gray-100 text-gray-600 border-gray-200"
: "bg-blue-800 text-blue-300 border-blue-700")
}
>
Time In
</th>
<th
className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
(color === "light"
? "bg-gray-100 text-gray-600 border-gray-200"
: "bg-blue-800 text-blue-300 border-blue-700")
}
>
Time Out
</th>
<th
className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
(color === "light"
? "bg-gray-100 text-gray-600 border-gray-200"
: "bg-blue-800 text-blue-300 border-blue-700")
}
>
Type
</th>
<th
className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
(color === "light"
? "bg-gray-100 text-gray-600 border-gray-200"
: "bg-blue-800 text-blue-300 border-blue-700")
}
>
Description
</th>
<th
className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
(color === "light"
? "bg-gray-100 text-gray-600 border-gray-200"
: "bg-blue-800 text-blue-300 border-blue-700")
}></th>
</tr>
</thead>
<tbody>
{/* loop through fetched credit data and add rows */}
{creditData.map((credit, index) => {
return (<tr key={index}>
<th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center">
{credit.date}
</th>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
{credit.timeIn}
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
{credit.timeOut}
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
{credit.type}
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
{credit.description}
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right">
<TableDropdown />
</td>
</tr>)
})}
</tbody>
</table>
</div>
</div>
</>
);
}
MyCreditLog.defaultProps = {
color: "light",
};
MyCreditLog.propTypes = {
color: PropTypes.oneOf(["light", "dark"]),
};

Answer 1

What a stupid question. I removed the "whitespace-no-wrap" class from each element and it worked perfectly.