fix(web): text overflow ellipsis (#1085)

Author: LeezQ

web/src/components/Editor/JSONViewer.tsx

@@ -39,7 +39,7 @@ const JSONViewerStyle: any = {
     color: "#954121",
   },
   "hljs-number": {
-    color: "#b0caa4",
+    color: "#01A99D",
   },
   "hljs-string": {
     color: "#0451a5",

web/src/pages/app/database/CollectionListPanel/index.tsx

@@ -103,8 +103,8 @@ export default function CollectionListPanel() {
                       store.setCurrentDB(db);
                     }}
                   >
-                    <div className="group flex w-full justify-between">
-                      <div className="font-semibold leading-loose">
+                    <div className="group flex w-full items-center justify-between">
+                      <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose">
                         <FileTypeIcon type="db" />
                         <span className="ml-2 text-base">{db.name}</span>
                       </div>

web/src/pages/app/database/PolicyListPanel/index.tsx

@@ -56,8 +56,8 @@ export default function PolicyListPanel() {
                     store.setCurrentPolicy(item);
                   }}
                 >
-                  <div className="group flex w-full justify-between">
-                    <div className="font-semibold leading-loose">
+                  <div className="group flex w-full items-center justify-between">
+                    <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose">
                       <FileTypeIcon type="policy" />
                       <span className="ml-2 text-base">{item.name}</span>
                     </div>

web/src/pages/app/functions/mods/FunctionPanel/index.tsx

@@ -190,14 +190,14 @@ export default function FunctionList() {
                     navigate(`/app/${currentApp?.appid}/${Pages.function}/${func?.name}`);
                   }}
                 >
-                  <div className="font-semibold leading-loose">
+                  <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose">
                     <FileTypeIcon type={FileType.ts} />
                     <span className="ml-2 text-base">{func?.name}</span>
                   </div>
                   <HStack spacing={1}>
                     {functionCache.getCache(func?.id, func?.source?.code) !==
                       func?.source?.code && (
-                      <span className="inline-block h-1 w-1 flex-none rounded-full bg-warn-700"></span>
+                      <span className="mt-[1px] inline-block h-1 w-1 flex-none rounded-full bg-warn-700"></span>
                     )}
                     <MoreButton
                       isHidden={func.name !== currentFunction?.name}