style: add responsiveness to profile settings

why did nobody tell me
This commit is contained in:
trafficlunar 2025-05-09 20:11:54 +01:00
parent f7977eafa2
commit 6db97a224f
2 changed files with 6 additions and 6 deletions

View file

@ -81,7 +81,7 @@ export default function ProfileSettings() {
</div> </div>
{/* Change Name */} {/* Change Name */}
<div className="grid grid-cols-2"> <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
<div> <div>
<label htmlFor="deletion" className="font-semibold"> <label htmlFor="deletion" className="font-semibold">
Change Display Name Change Display Name
@ -89,7 +89,7 @@ export default function ProfileSettings() {
<p className="text-sm text-zinc-500">This is a display name shown on your profile feel free to change it anytime</p> <p className="text-sm text-zinc-500">This is a display name shown on your profile feel free to change it anytime</p>
</div> </div>
<div className="flex justify-end gap-1"> <div className="flex justify-end gap-1 h-min">
<input <input
type="text" type="text"
className="pill input w-full max-w-64" className="pill input w-full max-w-64"
@ -99,7 +99,7 @@ export default function ProfileSettings() {
/> />
<SubmitDialogButton <SubmitDialogButton
title="Confirm Display Name Change" title="Confirm Display Name Change"
description="Update your display name? This will only be visible on your profile. You can change it again later." description="Are you sure? This will only be visible on your profile. You can change it again later."
error={displayNameChangeError} error={displayNameChangeError}
onSubmit={handleSubmitDisplayNameChange} onSubmit={handleSubmitDisplayNameChange}
> >
@ -112,7 +112,7 @@ export default function ProfileSettings() {
</div> </div>
{/* Change Username */} {/* Change Username */}
<div className="grid grid-cols-2"> <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
<div> <div>
<label htmlFor="deletion" className="font-semibold"> <label htmlFor="deletion" className="font-semibold">
Change Username Change Username
@ -158,7 +158,7 @@ export default function ProfileSettings() {
</div> </div>
{/* Delete Account */} {/* Delete Account */}
<div className="grid grid-cols-2"> <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
<div> <div>
<label htmlFor="deletion" className="font-semibold"> <label htmlFor="deletion" className="font-semibold">
Delete Account Delete Account

View file

@ -37,7 +37,7 @@ export default function SubmitDialogButton({ title, description, onSubmit, error
return ( return (
<> <>
<button onClick={() => setIsOpen(true)} className="pill button aspect-square !p-1 text-2xl"> <button onClick={() => setIsOpen(true)} className="pill button size-11 !p-1 text-2xl">
<Icon icon="material-symbols:check-rounded" /> <Icon icon="material-symbols:check-rounded" />
</button> </button>