UX: remove homepage textarea resize, height & focus tweaks (#6)

awesomerobot · web-flow · commit 5ea8e3754a52 · 2024-10-10T08:50:27.000-04:00
diff --git a/common/common.scss b/common/common.scss
@@ -277,12 +277,18 @@ html.composer-open .custom-homepage #main-outlet {
 
     .btn-primary {
       align-self: end;
+      min-height: 2.5em;
     }
 
     #custom-homepage-input {
       width: 100%;
       margin: 0;
-      min-height: 2.33em;
+      resize: none;
+      border-radius: var(--d-button-border-radius);
+      &:focus {
+        outline: none;
+        border-color: var(--primary-high);
+      }
     }
   }
 
diff --git a/javascripts/discourse/lib/simple-textarea-interactor.js b/javascripts/discourse/lib/simple-textarea-interactor.js
@@ -23,7 +23,7 @@ export default class SimpleTextareaInteractor {
   refreshHeight() {
     schedule("afterRender", () => {
       this.textarea.style.height = "auto";
-      this.textarea.style.height = `${this.textarea.scrollHeight + 1}px`;
+      this.textarea.style.height = `${this.textarea.scrollHeight + 2}px`;
     });
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -277,12 +277,18 @@ html.composer-open .custom-homepage #main-outlet {`
`277`	`277`
`278`	`278`	`.btn-primary {`
`279`	`279`	`align-self: end;`
	`280`	`+ min-height: 2.5em;`
`280`	`281`	`}`
`281`	`282`
`282`	`283`	`#custom-homepage-input {`
`283`	`284`	`width: 100%;`
`284`	`285`	`margin: 0;`
`285`		`- min-height: 2.33em;`
	`286`	`+ resize: none;`
	`287`	`+ border-radius: var(--d-button-border-radius);`
	`288`	`+ &:focus {`
	`289`	`+ outline: none;`
	`290`	`+ border-color: var(--primary-high);`
	`291`	`+ }`
`286`	`292`	`}`
`287`	`293`	`}`
`288`	`294`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default class SimpleTextareaInteractor {`
`23`	`23`	`refreshHeight() {`
`24`	`24`	`schedule("afterRender", () => {`
`25`	`25`	`this.textarea.style.height = "auto";`
`26`		- this.textarea.style.height = `${this.textarea.scrollHeight + 1}px`;
	`26`	+ this.textarea.style.height = `${this.textarea.scrollHeight + 2}px`;
`27`	`27`	`});`
`28`	`28`	`}`
`29`	`29`	`}`