From 84ea50339d4bdd54671fe342c883e796bb1fd27a Mon Sep 17 00:00:00 2001
From: Artemy Egorov <artegoser@gmail.com>
Date: Fri, 25 Aug 2023 18:34:12 +0300
Subject: [PATCH] fix: suggestions

idk why break all not working
---
 src/components/navbar.tsx | 10 +++-------
 src/components/video.tsx  |  4 +---
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 2a47f86..7de143d 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -36,7 +36,7 @@ export function NavbarComponent() {
 
       <NavbarContent className="sm:flex gap-4" justify="start">
         <NavbarItem>
-          <div className="relative block">
+          <div className="relative inline-block text-left">
             <Input
               isClearable
               radius="lg"
@@ -61,18 +61,14 @@ export function NavbarComponent() {
               }
             />
             <div
-              className="absolute right-1/2 md:right-1 mt-1 flex flex-col justify-center backdrop-blur-3xl rounded-xl p-2 bg-gray-50 dark:bg-transparent"
-              style={{
-                backfaceVisibility: "hidden",
-                transform: "translateZ(0)",
-              }}
+              className="absolute right-0 z-10 mt-2 flex flex-col backdrop-blur-3xl rounded-xl bg-gray-50 dark:bg-transparent"
             >
               {suggestions.length > 0 &&
                 suggestions.map((suggestion) => (
                   <Button
                     key={suggestion}
                     onClick={() => navigate(`/search?q=${suggestion}`)}
-                    className="m-1"
+                    className="m-1 break-all"
                   >
                     {suggestion}
                   </Button>
diff --git a/src/components/video.tsx b/src/components/video.tsx
index 5996aee..239317b 100644
--- a/src/components/video.tsx
+++ b/src/components/video.tsx
@@ -38,9 +38,7 @@ export function VideoComponent({ video, uploaderAvatar }: VideoComponentProps) {
           <div className="flex flex-row items-center">
             <EyeIcon className="w-6 h-6 p-1" />
             <p className="flex-none text-md">
-              {`${shortenNumber(video.views)}${
-                video.uploadedDate ? ` • ${video.uploadedDate}` : ""
-              }`}
+              {`${shortenNumber(video.views)}${video.uploadedDate ? ` • ${video.uploadedDate}` : ""}`}
             </p>
           </div>
         </div>