From 37f231ab2fc86e30305d4bbcccf86fb111856a6c Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 14:49:19 +0900
Subject: [PATCH 01/10] feat: add highlighting function on ticker

---
 .../ticker/_components/ticker-drawer.tsx      |  4 ++-
 .../(main)/ticker/_components/ticker-list.tsx | 32 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
index c1dce9f..2014b61 100644
--- a/src/app/(main)/ticker/_components/ticker-drawer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -86,7 +86,9 @@ export const TickerDrawer = React.memo(
           )}
         </DrawerHeader>
 
-        {drawerType === "name" && !!data && <TickerList data={data} onClick={handleTickerClick} />}
+        {drawerType === "name" && !!data && (
+          <TickerList data={data} tickerName={tickerName} onClick={handleTickerClick} />
+        )}
 
         {drawerType === "count" && (
           <DrawerFooter>
diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(main)/ticker/_components/ticker-list.tsx
index a42c398..fa40146 100644
--- a/src/app/(main)/ticker/_components/ticker-list.tsx
+++ b/src/app/(main)/ticker/_components/ticker-list.tsx
@@ -10,7 +10,31 @@ interface TickerProps {
   onClick: (stock: Stock) => void;
 }
 
-const TickerList = React.memo(({ data, hasShares, onClick }: TickerProps) => {
+const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerProps) => {
+  const getHighlightText = React.useCallback(
+    (text?: string) => {
+      if (!tickerName || !text) return text;
+      const regex = new RegExp(tickerName, "gi");
+
+      return text.split(regex).reduce((acc: (string | React.ReactElement)[], cur = "", idx, arr) => {
+        acc.push(cur);
+        // 마지막 배열 순번이 아닐 경우에만 하이라이트 워딩 추가
+        if (arr.length - 1 > idx) {
+          const match = text.match(regex);
+          const ticker = match ? match[idx] : tickerName;
+
+          acc.push(
+            <span className="text-main-700" key={idx}>
+              {ticker}
+            </span>
+          );
+        }
+        return acc;
+      }, []);
+    },
+    [tickerName]
+  );
+
   return (
     <div className="flex h-full w-full flex-1 flex-col items-start">
       <div className="flex w-full flex-1 flex-col items-start gap-4 overflow-scroll px-4 py-6">
@@ -19,8 +43,10 @@ const TickerList = React.memo(({ data, hasShares, onClick }: TickerProps) => {
             <div className="flex">
               <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
               <div>
-                <p className="text-left text-h3 text-grey-900">{item.ticker}</p>
-                <p className="line-clamp-1 break-all text-body3 text-grey-600">{item.companyName}</p>
+                <span className="text-left text-h3 text-grey-900">{getHighlightText(item.ticker)}</span>
+                <span className="line-clamp-1 break-all text-body3 text-grey-600">
+                  {getHighlightText(item.companyName)}
+                </span>
               </div>
             </div>
             {hasShares && (

From 8483281d09497533aa2ac97ff35811dfa8c696f4 Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 15:00:21 +0900
Subject: [PATCH 02/10] style: add style on ticker list ui

---
 src/app/(main)/ticker/_components/ticker-list.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(main)/ticker/_components/ticker-list.tsx
index fa40146..6ec8762 100644
--- a/src/app/(main)/ticker/_components/ticker-list.tsx
+++ b/src/app/(main)/ticker/_components/ticker-list.tsx
@@ -40,10 +40,10 @@ const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerP
       <div className="flex w-full flex-1 flex-col items-start gap-4 overflow-scroll px-4 py-6">
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>
-            <div className="flex">
+            <div className="flex items-center">
               <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
-              <div>
-                <span className="text-left text-h3 text-grey-900">{getHighlightText(item.ticker)}</span>
+              <div className="flex flex-col justify-between gap-1">
+                <span className="mb-1 text-left text-h5 text-grey-900">{getHighlightText(item.ticker)}</span>
                 <span className="line-clamp-1 break-all text-body3 text-grey-600">
                   {getHighlightText(item.companyName)}
                 </span>

From 593ef36c9061ad211841c5fc95269af72eb64651 Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 15:31:57 +0900
Subject: [PATCH 03/10] style: apply design qa about margin/padding

---
 src/app/(main)/ticker/_components/ticker-drawer.tsx | 2 ++
 src/app/(main)/ticker/_components/ticker-footer.tsx | 2 +-
 src/components/ui/drawer.tsx                        | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
index 2014b61..08820e8 100644
--- a/src/app/(main)/ticker/_components/ticker-drawer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -73,6 +73,8 @@ export const TickerDrawer = React.memo(
             clearInput={() => handleInputClear("name")}
           />
 
+          <div className="mb-5" />
+
           {drawerType !== "name" && (
             <Input
               value={String(tickerCount)}
diff --git a/src/app/(main)/ticker/_components/ticker-footer.tsx b/src/app/(main)/ticker/_components/ticker-footer.tsx
index 9e249f5..4481115 100644
--- a/src/app/(main)/ticker/_components/ticker-footer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-footer.tsx
@@ -16,7 +16,7 @@ export default function TickerFooter() {
 
   return (
     <div
-      className="fixed bottom-4 flex w-full justify-center p-5 pt-12"
+      className="fixed bottom-4 flex w-full justify-center p-5 pb-4 pt-12"
       style={{
         backgroundImage: "linear-gradient(0deg, var(--color-white) 52.78%, rgba(255, 255, 255, 0.00) 100%)",
         maxWidth: 768,
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 4b54fe9..1a56128 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -46,7 +46,7 @@ const DrawerContent = React.forwardRef<
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 p-4 text-h3 text-grey-900", className)} {...props} />
+  <div className={cn("grid p-4 text-h3 text-grey-900", className)} {...props} />
 );
 DrawerHeader.displayName = "DrawerHeader";
 

From b10bb999676dc9da18bb4785ba9c921fa9fe1060 Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 15:35:08 +0900
Subject: [PATCH 04/10] style: apply design qa on ticker-list

---
 src/app/(main)/ticker/_components/ticker-list.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(main)/ticker/_components/ticker-list.tsx
index 6ec8762..6b6fc83 100644
--- a/src/app/(main)/ticker/_components/ticker-list.tsx
+++ b/src/app/(main)/ticker/_components/ticker-list.tsx
@@ -37,7 +37,9 @@ const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerP
 
   return (
     <div className="flex h-full w-full flex-1 flex-col items-start">
-      <div className="flex w-full flex-1 flex-col items-start gap-4 overflow-scroll px-4 py-6">
+      <div
+        className={`flex w-full flex-1 flex-col items-start ${hasShares ? "gap-6" : "gap-5"} overflow-scroll px-4 py-6`}
+      >
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>
             <div className="flex items-center">

From b7966084397a2adbb9e08ca2426f1b0d7e4891fb Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 17:54:29 +0900
Subject: [PATCH 05/10] feat: add reset fc when user click overlay with edit
 type

---
 src/app/(main)/ticker/_components/ticker-content.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/(main)/ticker/_components/ticker-content.tsx b/src/app/(main)/ticker/_components/ticker-content.tsx
index 10f934d..b9a9c37 100644
--- a/src/app/(main)/ticker/_components/ticker-content.tsx
+++ b/src/app/(main)/ticker/_components/ticker-content.tsx
@@ -114,6 +114,14 @@ const TickerContent = React.memo(() => {
     isDrawerOpenChange(false);
   }, [editStock, isDrawerOpenChange, resetData, selectedStock, tickerCount]);
 
+  const handleOverlayClick = React.useCallback(() => {
+    isDrawerOpenChange(false);
+
+    if (drawerType === "edit") {
+      resetData();
+    }
+  }, [drawerType, isDrawerOpenChange, resetData]);
+
   return (
     <DrawerPrimitive
       open={isDrawerOpen}
@@ -125,7 +133,7 @@ const TickerContent = React.memo(() => {
         <Intro />
         <TickerList data={stocks} hasShares onClick={handleSelectedTickerClick} />
       </div>
-      <DrawerOverlay onClick={() => isDrawerOpenChange(false)} />
+      <DrawerOverlay onClick={handleOverlayClick} />
       <TickerDrawer
         drawerType={drawerType}
         tickerCount={tickerCount}

From e669ef939a9233f831fcdc2d2145c89cbb95b6ac Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 17:58:21 +0900
Subject: [PATCH 06/10] style: change the dialog button height

---
 src/components/common/dialog/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/dialog/dialog.tsx b/src/components/common/dialog/dialog.tsx
index 7abed47..8095d85 100644
--- a/src/components/common/dialog/dialog.tsx
+++ b/src/components/common/dialog/dialog.tsx
@@ -16,7 +16,7 @@ export const Dialog = React.memo(({ title }: DialogProps) => {
         <DialogTitle className="my-4 text-h5">{title}</DialogTitle>
       </DialogHeader>
       <DialogFooter>
-        <Button className="mt-5 rounded-lg bg-main-700" onClick={() => isDialogOpenChange(false)}>
+        <Button className="mt-5 h-12 rounded-lg bg-main-700 py-4" onClick={() => isDialogOpenChange(false)}>
           <DialogDescription className="text-h6 text-white">Ok</DialogDescription>
         </Button>
       </DialogFooter>

From 2af18784801c4ee54c425185f5202533efce0a88 Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 18:19:25 +0900
Subject: [PATCH 07/10] style: fix dialog modal according to qa

---
 src/components/common/dialog/dialog.tsx |  4 ++--
 src/components/ui/dialog.tsx            | 10 ++--------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/common/dialog/dialog.tsx b/src/components/common/dialog/dialog.tsx
index 8095d85..03a8cf8 100644
--- a/src/components/common/dialog/dialog.tsx
+++ b/src/components/common/dialog/dialog.tsx
@@ -11,9 +11,9 @@ interface DialogProps {
 export const Dialog = React.memo(({ title }: DialogProps) => {
   const { isDialogOpenChange } = useDialogStore();
   return (
-    <DialogContent className="w-4/5 rounded-xl bg-white">
+    <DialogContent className="w-4/5 rounded-xl bg-white p-5">
       <DialogHeader>
-        <DialogTitle className="my-4 text-h5">{title}</DialogTitle>
+        <DialogTitle className="my-5 text-h5">{title}</DialogTitle>
       </DialogHeader>
       <DialogFooter>
         <Button className="mt-5 h-12 rounded-lg bg-main-700 py-4" onClick={() => isDialogOpenChange(false)}>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 999a7a2..1f63581 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border p-5 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -63,13 +63,7 @@ DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => <DialogPrimitive.Title ref={ref} className={className} {...props} />);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<

From fb9182b557d24652d4cf309bd77aa9279ba40e5f Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 18:27:38 +0900
Subject: [PATCH 08/10] style: fix toast according to qa

---
 src/components/common/toast/toast.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/common/toast/toast.tsx b/src/components/common/toast/toast.tsx
index 5368300..8c2f93a 100644
--- a/src/components/common/toast/toast.tsx
+++ b/src/components/common/toast/toast.tsx
@@ -18,13 +18,14 @@ const Toast = React.memo(({ t, title, isRevertable, handleUndo, ...props }: Toas
 
   return (
     <div
-      className={cn(
-        "flex items-center justify-between rounded bg-grey-900 px-4 py-3 text-white shadow",
-        props.className
-      )}
+      className={cn("flex items-center justify-between rounded bg-grey-900 py-3.5 text-white shadow", props.className)}
+      style={{
+        paddingLeft: "1.125rem",
+        paddingRight: "1.125rem",
+      }}
       {...props}
     >
-      <p>{title}</p>
+      <p className="text-body3">{title}</p>
       {isRevertable && <UndoButton onClick={onUndo} />}
     </div>
   );

From c6a427d6b1574e8bd94496dc4e647adc6f5e5406 Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 18:48:41 +0900
Subject: [PATCH 09/10] style: set max-width and body overriding css

---
 .../(main)/stock/[id]/_components/stock-drawer.tsx   |  2 +-
 src/app/(main)/ticker/_components/ticker-content.tsx | 12 ++++++++++++
 src/app/(main)/ticker/_components/ticker-drawer.tsx  |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/stock/[id]/_components/stock-drawer.tsx b/src/app/(main)/stock/[id]/_components/stock-drawer.tsx
index 1bd8ebe..55131c8 100644
--- a/src/app/(main)/stock/[id]/_components/stock-drawer.tsx
+++ b/src/app/(main)/stock/[id]/_components/stock-drawer.tsx
@@ -16,7 +16,7 @@ interface StockInfoDrawerProps {
 
 export const StockInfoDrawer = React.memo(({ handleInfoClick }: StockInfoDrawerProps) => {
   return (
-    <DrawerContent className="mx-auto  max-w-[--max-width] ">
+    <DrawerContent className="mx-auto max-w-screen-md">
       <DrawerHeader>
         <DrawerTitle className="mb-6 flex flex-col">
           <p className=" text-h3 font-semibold text-grey-900">{"Latest Price"}</p>
diff --git a/src/app/(main)/ticker/_components/ticker-content.tsx b/src/app/(main)/ticker/_components/ticker-content.tsx
index b9a9c37..3ea231f 100644
--- a/src/app/(main)/ticker/_components/ticker-content.tsx
+++ b/src/app/(main)/ticker/_components/ticker-content.tsx
@@ -122,6 +122,18 @@ const TickerContent = React.memo(() => {
     }
   }, [drawerType, isDrawerOpenChange, resetData]);
 
+  React.useEffect(() => {
+    // 컴포넌트가 마운트될 때 body 스타일 변경
+    document.body.style.setProperty("margin", "auto", "important");
+    document.body.style.setProperty("padding", "0");
+
+    // 컴포넌트가 언마운트될 때 body 스타일 복원
+    return () => {
+      document.body.style.removeProperty("margin");
+      document.body.style.removeProperty("padding");
+    };
+  }, []);
+
   return (
     <DrawerPrimitive
       open={isDrawerOpen}
diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
index 08820e8..c29d4e2 100644
--- a/src/app/(main)/ticker/_components/ticker-drawer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -59,7 +59,7 @@ export const TickerDrawer = React.memo(
     }, [drawerType]);
 
     return (
-      <DrawerContent className="mx-auto h-[calc(100%-100px)] max-w-[--max-width] ">
+      <DrawerContent className="mx-auto h-[calc(100%-100px)] max-w-screen-md">
         <DrawerHeader>
           <DrawerTitle className="mb-10 text-h3 font-semibold text-grey-900">{title}</DrawerTitle>
           <Input

From e40ee620ecdec7ae6dfa9cdb73f7bd70a44222fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EC=A7=84=EB=A6=AC/=EC=8A=A4=ED=86=A0=EC=96=B4?=
 =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=ED=8C=80?= <yeti.jeong@musinsa.com>
Date: Tue, 27 Feb 2024 22:21:39 +0900
Subject: [PATCH 10/10] style: fix the styling

---
 src/app/(main)/ticker/_components/intro.tsx      |  2 +-
 .../(main)/ticker/_components/ticker-drawer.tsx  |  2 +-
 .../(main)/ticker/_components/ticker-footer.tsx  |  4 ++--
 .../(main)/ticker/_components/ticker-list.tsx    | 16 ++++++++++------
 src/components/ui/input.tsx                      |  4 ++--
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/app/(main)/ticker/_components/intro.tsx b/src/app/(main)/ticker/_components/intro.tsx
index 95ab94e..e549ba0 100644
--- a/src/app/(main)/ticker/_components/intro.tsx
+++ b/src/app/(main)/ticker/_components/intro.tsx
@@ -9,7 +9,7 @@ const Intro = () => {
   const { stocks } = useStocksStore();
   const hasStock = stocks.length > 0;
   return (
-    <div className={`${hasStock && "border-b border-b-grey-100"} px-4`}>
+    <div className={`${hasStock && "border-b border-b-grey-100"} sticky top-0 w-full bg-white px-4`}>
       <h2 className="pt-4 text-h2">
         You added <span className="text-main-700">{stocks.length}</span> {`${hasStock ? "stocks" : "stock"}`}.
       </h2>
diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
index c29d4e2..f244262 100644
--- a/src/app/(main)/ticker/_components/ticker-drawer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -77,7 +77,7 @@ export const TickerDrawer = React.memo(
 
           {drawerType !== "name" && (
             <Input
-              value={String(tickerCount)}
+              value={tickerCount === 0 ? "" : String(tickerCount)}
               label="Shares"
               type="number"
               errorDescription="You can enter 1 or more."
diff --git a/src/app/(main)/ticker/_components/ticker-footer.tsx b/src/app/(main)/ticker/_components/ticker-footer.tsx
index 4481115..779c637 100644
--- a/src/app/(main)/ticker/_components/ticker-footer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-footer.tsx
@@ -16,7 +16,7 @@ export default function TickerFooter() {
 
   return (
     <div
-      className="fixed bottom-4 flex w-full justify-center p-5 pb-4 pt-12"
+      className="sticky bottom-0 flex w-full justify-center p-5 pb-4 pt-0 "
       style={{
         backgroundImage: "linear-gradient(0deg, var(--color-white) 52.78%, rgba(255, 255, 255, 0.00) 100%)",
         maxWidth: 768,
@@ -24,7 +24,7 @@ export default function TickerFooter() {
     >
       <Button
         variant={"default"}
-        className="mx-5 h-14 w-full rounded-lg bg-main-700 p-4"
+        className="mt-14 h-14 w-full rounded-lg bg-main-700 p-4"
         style={{
           backgroundColor: "#4F6AFC",
           color: "#fff",
diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(main)/ticker/_components/ticker-list.tsx
index 6b6fc83..b717d7c 100644
--- a/src/app/(main)/ticker/_components/ticker-list.tsx
+++ b/src/app/(main)/ticker/_components/ticker-list.tsx
@@ -36,24 +36,28 @@ const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerP
   );
 
   return (
-    <div className="flex h-full w-full flex-1 flex-col items-start">
+    <div className="flex h-full w-full flex-1 flex-col items-start" style={{}}>
       <div
-        className={`flex w-full flex-1 flex-col items-start ${hasShares ? "gap-6" : "gap-5"} overflow-scroll px-4 py-6`}
+        className={`flex w-full flex-1 flex-col items-start ${
+          hasShares ? "gap-6" : "gap-5"
+        } overflow-scroll px-4 pb-1 pt-6`}
       >
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>
             <div className="flex items-center">
-              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
+              <div className="mr-4 flex h-10 min-w-10 max-w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
               <div className="flex flex-col justify-between gap-1">
-                <span className="mb-1 text-left text-h5 text-grey-900">{getHighlightText(item.ticker)}</span>
+                <span className="mb-1 line-clamp-1 break-all text-left text-h5 text-grey-900">
+                  {getHighlightText(item.ticker)}
+                </span>
                 <span className="line-clamp-1 break-all text-body3 text-grey-600">
                   {getHighlightText(item.companyName)}
                 </span>
               </div>
             </div>
             {hasShares && (
-              <div className="ml-2 text-nowrap">
-                <p className="text-body1 text-main-900">{`${item.count} Shares`}</p>
+              <div className="ml-2 max-w-20">
+                <p className="truncate text-body1 text-main-900">{`${item.count} Shares`}</p>
               </div>
             )}
           </div>
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index d2c4f96..ee8d328 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -75,7 +75,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             onBlur={handleBlur}
             {...props}
           />
-          {!props.disabled && props.value && (
+          {inputState === "focused" && !props.disabled && props.value ? (
             <div className="flex items-center pl-4 ">
               <button
                 className="flex h-5 w-5 items-center justify-center rounded-full bg-grey-300"
@@ -84,7 +84,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                 <IcXCircle color={"#f9fafb"} />
               </button>
             </div>
-          )}
+          ) : null}
         </div>
         {inputState === "error" && errorDescription && <p className="mt-1 text-body4 text-error">{errorDescription}</p>}
       </div>