Why is the date input squished on iphone only? [duplicate]

Question

Here is the link to the site Here is the link to the code

On desktop, it looks fine:

But on iPhone, the date gets collapsed even though the input should be taking up the full width of the parent div. Here is the screenshot:

What CSS trait am I missing?

<div className="mb-6">
                <div className="relative">
                  <span className="absolute p-2.5">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      height="24px"
                      viewBox="0 0 24 24"
                      width="24px"
                      className="fill-black dark:fill-white"
                    >
                      <path d="M0 0h24v24H0V0z" fill="none" />
                      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z" />
                    </svg>
                  </span>
                  <input
                    className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    id="date-input"
                    type="date"
                    value={date}
                    onChange={(e) => setDate(e.target.value)}
                  />
                </div>
              </div>