Refine further.

nulib · Jun 26, 2024 · 8fca6d7 · 8fca6d7
1 parent 0056b31
commit 8fca6d7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 25 deletions.
diff --git a/components/Header/Super.tsx b/components/Header/Super.tsx
@@ -5,6 +5,7 @@ import {
  Super,
  User,
 } from "@/components/Header/Header.styled";
+
 import Container from "../Shared/Container";
 import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
 import Link from "next/link";

diff --git a/components/Search/TextArea.styled.ts b/components/Search/TextArea.styled.ts
@@ -54,10 +54,10 @@ const StyledTextArea = styled("div", {
 
  textarea: {
  background: "transparent",
- padding: "15px $gr5 0",
+ padding: "15px $gr5 10px",
  border: "none",
  fontSize: "$gr3",
- lineHeight: "138%",
+ lineHeight: "147%",
  height: "$gr5",
  zIndex: "1",
  fontFamily: "$northwesternSansRegular",

diff --git a/components/Search/TextArea.tsx b/components/Search/TextArea.tsx
@@ -21,40 +21,33 @@ interface SearchTextAreaProps {
 }
 
 const SearchTextArea = forwardRef<HTMLTextAreaElement, SearchTextAreaProps>(
- (
- {
- isAi,
- isFocused,
- searchValue,
- handleSearchChange,
- handleSearchFocus,
- handleSubmit,
- clearSearchResults,
- },
- ref
- ) => {
+ ({
+ isAi,
+ isFocused,
+ searchValue,
+ handleSearchChange,
+ handleSearchFocus,
+ handleSubmit,
+ clearSearchResults,
+ }) => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+ /**
+ * Resize the textarea to fit its content
+ */
  useEffect(() => {
  const textarea = textareaRef.current;
  if (textarea) {
- const height =
- textarea.scrollHeight > 60
- ? textarea.scrollHeight + 20
- : textarea.scrollHeight;
- textarea.style.height = `${height}px`;
+ console.log(textarea);
+ textarea.style.height = `${textarea.scrollHeight}px`;
  }
- }, [searchValue]);
+ }, [searchValue, isFocused]);
 
  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
  handleSearchChange(e);
  const textarea = textareaRef.current;
  if (textarea) {
- const height =
- textarea.scrollHeight > 60
- ? textarea.scrollHeight + 20
- : textarea.scrollHeight;
- textarea.style.height = `${height}px`;
+ textarea.style.height = `${textarea.scrollHeight}px`;
  }
  };