perf: beautify the visual performance of scroll bars caused by too many groups

client/web/src/routes/Main/Navbar/NavItem.tsx

@@ -68,7 +68,7 @@ export const NavbarNavItem: React.FC<
 
       {inner}
 
-      <div className="absolute right-0 bottom-0">
+      <div className="absolute right-2 bottom-0">
         {badge === true && <Badge status="error" {...props.badgeProps} />}
       </div>
     </div>

client/web/src/routes/Main/Navbar/index.tsx

@@ -40,7 +40,7 @@ export const Navbar: React.FC = React.memo(() => {
         </div>
 
         {/* 如果导航栏高度不够就缩减群组列表的高度 */}
-        <div className="overflow-y-hidden hover:overflow-y-auto overflow-x-hidden thin-scrollbar">
+        <div className="overflow-y-hidden hover:overflow-y-smart scroll overflow-x-hidden thin-scrollbar">
           <GroupNav />
         </div>
 

client/web/tailwind.config.js

@@ -52,6 +52,23 @@ const tailchat = plugin(({ e, addUtilities }) => {
 
   addUtilities(newUtilities);
 
+  addUtilities(
+    {
+      '.overflow-smart': {
+        overflow: ['auto', 'overlay'],
+      },
+      '.overflow-x-smart': {
+        'overflow-x': ['auto', 'overlay'],
+      },
+      '.overflow-y-smart': {
+        'overflow-y': ['auto', 'overlay'],
+      },
+    },
+    {
+      variants: ['hover'],
+    }
+  );
+
   // Fork from https://github.com/ItzAfroBoy/tailwindcss-zoom/blob/master/index.js
   const percents = [
     {