From 041d259849e3a82bc1930b9fbae4afa0d797d355 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Wed, 31 Jul 2024 22:29:58 +0700
Subject: [PATCH] gap fix and clear search fix

---
 .../src/v2/view/pages/dev_tts/DevTTS.tsx      | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
index 1ad1e2e53a..4596ed24f0 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
@@ -160,7 +160,7 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
             Make your favorite characters speak!
           </p>
 
-          <div className="d-flex flex-column gap-4">
+          <div className="d-flex flex-column gap-3">
             <div className="fy-featured-voices-section d-none d-lg-block">
               <h5 className="fw-bold">Featured Voices</h5>
               <div className="row g-3">
@@ -174,28 +174,30 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
               </div>
             </div>
 
-            <div className="position-relative">
+            <div>
               <Label label="Search for a Voice" />
-              <Input
-                autoFocus={isMobile ? false : selectedVoice ? false : true}
-                icon={faSearch}
-                placeholder={"Search from 3500+ voices"}
-                onChange={searchChange()}
-                value={search}
-              />
-              {search && (
-                <FontAwesomeIcon
-                  icon={faXmark}
-                  className="position-absolute opacity-75 fs-5"
-                  style={{
-                    right: "1rem",
-                    top: "50%",
-                    transform: "translateY(-50%)",
-                    cursor: "pointer",
-                  }}
-                  onClick={() => searchSet("")}
+              <div className="position-relative">
+                <Input
+                  autoFocus={isMobile ? false : selectedVoice ? false : true}
+                  icon={faSearch}
+                  placeholder={"Search from 3500+ voices"}
+                  onChange={searchChange()}
+                  value={search}
                 />
-              )}
+                {search && (
+                  <FontAwesomeIcon
+                    icon={faXmark}
+                    className="position-absolute opacity-75 fs-5"
+                    style={{
+                      right: "1rem",
+                      top: "50%",
+                      transform: "translateY(-50%)",
+                      cursor: "pointer",
+                    }}
+                    onClick={() => searchSet("")}
+                  />
+                )}
+              </div>
             </div>
 
             <div>