Component shrinks at fixed aspect ratio instead of just reducing width when viewport shrinks. (React, Tailwind CSS) - css

Question

Whenever I use Google Chrome's responsive view to see my login form component at different screen sizes, I notice some strange behaviour. Once the viewport shrinks to a certain width, specifically 1024px, it stops shrinking horizontally and instead starts shrinking on both axis at the same fixed rate. This is despite there being ample space in the form still.
I tried setting fixed (non-percentile) values for the top-level to hopefully constrain the height to a specific scale, but this hasn't fixed the issue unfortunately. If anyone could help me to troubleshoot this behaviour I would be very appreciative!
The code is written using the React library and makes use of TailwindCSS classes for styling.
<div className='
w-3/4 xl:w-1/3 h-[26rem]
absolute
top-1/2 left-1/2 xl:left-3/4
-translate-y-1/2 -translate-x-1/2 xl:-translate-x-3/4'>
<div className='
w-full h-full
relative
bg-navWhite
py-12 px-4 sm:px-8
shadow-lg
flex flex-col'>
<h1 className='
font-navigation font-medium text-3xl tracking-tight
text-navGrey
text-center'>
Sign In
</h1>
<p className='
mt-2
font-navigation
text-navGrey text-center
font-light text-base'>
Enter your credentials below, to access your dashboard.
</p>
<form className='
flex flex-col gap-y-4 mt-4'>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<input
type="text"
placeholder="Email Address"
value={username}
name='Email signup'
onChange={usernameInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
mail
</span>
</div>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<span
onClick={passwordVisibility}>
<span className='
cursor-pointer select-none
material-symbols-outlined
text-2xl
h-full
p-2'
style={showPassword === true ? styles.active : styles.inactive}>
{showPassword === true ? 'visibility' : 'visibility_off'}
</span>
</span>
<input
type='password'
id='passwordField'
placeholder="Password"
value={password}
name='Email signup'
onChange={passwordInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
lock
</span>
</div>
<div className="flex justify-between p-2 -mb-2">
<label className='self-end'>
<input type="checkbox" checked={rememberPassword} onChange={() => toggleRemember(!rememberPassword)} className='relative align-middle w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600'/>
<span className="
sm:text-sm
text-navGrey/50
ml-1">
Remember me
</span>
</label>
<span className="
cursor-pointer
sm:text-sm
text-dashboardBlue
no-underline
hover:underline
transition-all duration-200">
Forgot password?
</span>
</div>
<button
className='
w-full p-6 mt-2
relative
bg-dashboardBlue
focus:outline-none focus:ring-2 focus:ring-dashboardBlue focus:ring-offset-2'
onClick={loginAction}>
<div className='relative' style={loading === true ? styles.notLoading : styles.loading}>
<span className='
absolute
top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
text-white
font-semibold
text-lg
transition-all duration-300'>
Login
</span>
</div>
<Loader visibility={loading === true ? styles.loading : styles.notLoading} />
</button>
</form>
</div>
</div>