From 33c8528c1a1282d7c812dc93598d4adb9de476c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C6=B0=C6=A1ng=20H=E1=BB=93=20Minh=20T=C3=BA?=
 <duonghominhtu1207@gmail.com>
Date: Sat, 11 May 2024 11:46:37 +0700
Subject: [PATCH] fix: double scroll bar when searching (#5623)

* fix: double scroll bar when searching

* fix: use cn instead

---------

Co-authored-by: TuDHM <tudhm@ghn.vn>
Co-authored-by: Arik Chakma <arikchangma@gmail.com>
---
 src/components/CommandMenu/CommandMenu.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx
index 3965ba14f..5512fb0f1 100644
--- a/src/components/CommandMenu/CommandMenu.tsx
+++ b/src/components/CommandMenu/CommandMenu.tsx
@@ -17,6 +17,7 @@ import { ClipboardIcon } from '../ReactIcons/ClipboardIcon.tsx';
 import { GuideIcon } from '../ReactIcons/GuideIcon.tsx';
 import { HomeIcon } from '../ReactIcons/HomeIcon.tsx';
 import { VideoIcon } from '../ReactIcons/VideoIcon.tsx';
+import { cn } from '../../lib/classname.ts';
 
 export type PageType = {
   id: string;
@@ -190,7 +191,7 @@ export function CommandMenu() {
 
   return (
     <div className="fixed left-0 right-0 top-0 z-50 flex h-full justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div className="relative top-0 h-full w-full max-w-lg p-2 sm:top-20 md:h-auto">
+      <div className="relative top-0 h-full w-full max-w-lg p-2 sm:mt-20 md:h-auto">
         <div className="relative rounded-lg bg-white shadow" ref={modalRef}>
           <input
             ref={inputRef}
@@ -245,9 +246,10 @@ export function CommandMenu() {
                       <div className="border-b border-gray-100"></div>
                     )}
                     <a
-                      className={`flex w-full items-center rounded p-2 text-sm ${
-                        counter === activeCounter ? 'bg-gray-100' : ''
-                      }`}
+                      className={cn(
+                        'flex w-full items-center rounded p-2 text-sm',
+                        counter === activeCounter ? 'bg-gray-100' : '',
+                      )}
                       onMouseOver={() => setActiveCounter(counter)}
                       href={page.url}
                     >