Fix spacing form spacing and alignment.

Co-Authored-By: [email protected]

Author: Ashi Krishnan

preview-src/comment.tsx

@@ -130,7 +130,7 @@ export const CommentBody = ({ bodyHTML, body }: Embodied) =>
 
 export function AddComment({ pendingCommentText }: PullRequest) {
 		const { updatePR, comment } = useContext(PullRequestContext);
-		return <form id='comment-form' className='comment-form' onSubmit={onSubmit}>
+		return <form id='comment-form' className='comment-form main-comment-form' onSubmit={onSubmit}>
 			<textarea id='comment-textarea'
 				name='body'
 				onInput={({ target }) =>

preview-src/header.tsx

@@ -54,9 +54,10 @@ function Title({ title, number, url, canEdit, isCurrentlyCheckedOut }: Partial<P
 						}
 					}
 				>
-				<textarea name='text' defaultValue={currentTitle}></textarea>
+				<textarea name='text' style={{ width: '100%' }} defaultValue={currentTitle}></textarea>
 				<div className='form-actions'>
-					<button className='secondary'>Cancel</button>
+					<button className='secondary'
+						onClick={() => setEditMode(false)}>Cancel</button>
 					<input type='submit' value='Update' />
 				</div>
 			</form>

preview-src/index.css

@@ -636,19 +636,18 @@ textarea:focus {
 	padding: 5px 0;
 }
 
-.editing-form .form-actions button {
-	margin-left: 5px;
-}
-
 .reply-button {
 	margin-left: auto;
 	margin-right: 0 !important;
 }
 
 .form-actions {
+	display: flex;
+}
+
+.main-comment-form > .form-actions {
 	padding-top: 10px;
 	margin-bottom: 10px;
-	display: flex;
 }
 
 body button:disabled,
@@ -1044,10 +1043,9 @@ code {
 }
 
 .title-editing-form {
-	min-width: 30%;
+	flex-grow: 1;
 }
 
-.title-editing-form > .form-actions > button {
+.title-editing-form > .form-actions {
 	margin-left: 0;
-	margin-right: 9px;
 }