style: add responsiveness to profile settings
why did nobody tell me
This commit is contained in:
parent
f7977eafa2
commit
6db97a224f
2 changed files with 6 additions and 6 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue