From 6db97a224ffbfa45b6f1c2b0ebcf84d4ceea19de Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 9 May 2025 20:11:54 +0100
Subject: [PATCH] style: add responsiveness to profile settings

why did nobody tell me
---
 src/components/profile-settings/index.tsx              | 10 +++++-----
 .../profile-settings/submit-dialog-button.tsx          |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/profile-settings/index.tsx b/src/components/profile-settings/index.tsx
index 8a3bff0..ea0fae5 100644
--- a/src/components/profile-settings/index.tsx
+++ b/src/components/profile-settings/index.tsx
@@ -81,7 +81,7 @@ export default function ProfileSettings() {
 			</div>
 
 			{/* Change Name */}
-			<div className="grid grid-cols-2">
+			<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
 				<div>
 					<label htmlFor="deletion" className="font-semibold">
 						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>
 				</div>
 
-				<div className="flex justify-end gap-1">
+				<div className="flex justify-end gap-1 h-min">
 					<input
 						type="text"
 						className="pill input w-full max-w-64"
@@ -99,7 +99,7 @@ export default function ProfileSettings() {
 					/>
 					<SubmitDialogButton
 						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}
 						onSubmit={handleSubmitDisplayNameChange}
 					>
@@ -112,7 +112,7 @@ export default function ProfileSettings() {
 			</div>
 
 			{/* Change Username */}
-			<div className="grid grid-cols-2">
+			<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
 				<div>
 					<label htmlFor="deletion" className="font-semibold">
 						Change Username
@@ -158,7 +158,7 @@ export default function ProfileSettings() {
 			</div>
 
 			{/* Delete Account */}
-			<div className="grid grid-cols-2">
+			<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
 				<div>
 					<label htmlFor="deletion" className="font-semibold">
 						Delete Account
diff --git a/src/components/profile-settings/submit-dialog-button.tsx b/src/components/profile-settings/submit-dialog-button.tsx
index fe6e227..c57d134 100644
--- a/src/components/profile-settings/submit-dialog-button.tsx
+++ b/src/components/profile-settings/submit-dialog-button.tsx
@@ -37,7 +37,7 @@ export default function SubmitDialogButton({ title, description, onSubmit, error
 
 	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" />
 			</button>