vvmgev · Cheese-Yu · Apr 17, 2024
diff --git a/browser-extension/src/options/components/common/list/list.tsx b/browser-extension/src/options/components/common/list/list.tsx
@@ -20,6 +20,7 @@ type Props = {
   items: ListItems[];
   listClasses?: string;
   rowClasses?: string;
+  rowStyle?: React.CSSProperties;
   headerClasses?: string;
   activeRow?: Item<any> | null;
   data: Item<any>[];
@@ -39,6 +40,7 @@ const List: FC<Props> = ({
   options,
   listClasses = "",
   rowClasses = "",
+  rowStyle = {},
   headerClasses = "",
   activeRow,
   texts = {
@@ -48,10 +50,13 @@ const List: FC<Props> = ({
 }) => {
   return (
     <>
-      <div className="flex items-center justify-between w-full px-6 py-3 border-b border-slate-700 bg-slate-700 bg-opacity-40">
+      <div
+        className={`grid grid-cols-${headers.length} w-full px-6 py-3 border-b border-slate-700 bg-slate-700 bg-opacity-40`}
+        style={rowStyle}
+      >
         {headers.map((item) => {
           return (
-            <div key={item.title} className={twMerge(`flex-1 ${item.classes || ""}`, headerClasses)}>
+            <div key={item.title} className={twMerge(`w-full ${item.classes || ""}`, headerClasses)}>
               {item.render()}
             </div>
           );
@@ -64,14 +69,15 @@ const List: FC<Props> = ({
               onClick={() => onRowClick(row)}
               key={row.id}
               className={twMerge(
-                "py-5 max-h-[90%] flex justify-between items-center px-6 border-b border-slate-700 w-full hover:bg-slate-800 hover:bg-opacity-40",
+                `py-5 max-h-[90%] grid grid-cols-${items.length} items-center px-6 border-b border-slate-700 w-full hover:bg-slate-800 hover:bg-opacity-40`,
                 rowClasses,
                 activeRow?.id === row.id ? "text-sky-500" : ""
               )}
+              style={rowStyle}
             >
               {items.map((item) => {
                 return (
-                  <div key={item.field} className={`flex flex-1 ${item.classes || ""}`}>
+                  <div key={item.field} className={`flex w-full ${item.classes || ""}`}>
                     {item.render(row, options)}
                   </div>
                 );

diff --git a/browser-extension/src/options/components/ruleList/list.config.tsx b/browser-extension/src/options/components/ruleList/list.config.tsx
@@ -43,7 +43,7 @@ export const LIST_HEADERS: ListHeader[] = [
   },
   {
     title: "Actions",
-    classes: "flex justify-end",
+    classes: "flex justify-end pr-4",
     render: function () {
       return this.title;
     },
@@ -53,8 +53,8 @@ export const LIST_HEADERS: ListHeader[] = [
 export const LIST_ITEMS: ListItems[] = [
   {
     field: "name",
-    render: function (item, handlers) {
-      return handlers?.cutString(item[this.field]);
+    render: function (item) {
+      return <span className="truncate">{item[this.field]}</span>;
     },
   },
   {
@@ -70,12 +70,17 @@ export const LIST_ITEMS: ListItems[] = [
   },
   {
     field: "source",
-    render: function (item, handlers) {
-      const firstSource = handlers?.cutString(item.conditions[0][this.field], 15);
-      if (item.conditions.length > 1) {
-        return `${firstSource} + ${item.conditions.length - 1}`;
-      }
-      return firstSource;
+    classes: "pr-2",
+    render: function (item) {
+      const firstSource = item.conditions[0][this.field];
+      const extraConditionsCount = item.conditions.length - 1;
+      const content = extraConditionsCount ? `${firstSource} + ${extraConditionsCount}` : firstSource;
+
+      return (
+        <Tooltip content={content}>
+          <span className="truncate">{content}</span>
+        </Tooltip>
+      );
     },
   },
   {

diff --git a/browser-extension/src/popup/components/content/content.tsx b/browser-extension/src/popup/components/content/content.tsx
@@ -52,6 +52,9 @@ const Content = () => {
               title: "Seems You Have Not Created a Rule Yet",
               description: 'Please Select One Of Rule In The "Create Rule" Tab',
             }}
+            rowStyle={{
+              gridTemplateColumns: "26% 26% 33% 15%",
+            }}
           />
         </div>
       )}

diff --git a/browser-extension/src/popup/components/content/list.config.tsx b/browser-extension/src/popup/components/content/list.config.tsx
@@ -1,8 +1,8 @@
 import { ListHeader, ListItems } from "@/options/components/common/list/list";
 import Switcher from "@options/components/common/switcher/switcher";
 import { IconsMap, PageName } from "@models/formFieldModel";
-import Button from "@options/components/common/button/button";
 import TabService from "@services/TabService";
+import Tooltip from "@options/components/common/tooltip/tooltip";
 
 export const LIST_HEADERS: ListHeader[] = [
   {
@@ -40,11 +40,14 @@ const onEditClick = async (item) => {
 export const LIST_ITEMS: ListItems[] = [
   {
     field: "name",
-    render: function (item, handlers) {
+    render: function (item) {
       return (
-        <Button className="text-left" variant="link" onClick={() => onEditClick(item)}>
-          {handlers?.cutString(item[this.field])}
-        </Button>
+        <span
+          className="cursor-pointer hover:underline hover:underline-offset-2 hover:text-sky-500 text-left w-full truncate mr-1"
+          onClick={() => onEditClick(item)}
+        >
+          {item[this.field]}
+        </span>
       );
     },
   },
@@ -62,16 +65,20 @@ export const LIST_ITEMS: ListItems[] = [
   {
     field: "source",
     render: function (item, handlers) {
-      const firstSource = handlers?.cutString(item.conditions[0][this.field], 15);
-      if (item.conditions.length > 1) {
-        return `${firstSource} + ${item.conditions.length - 1}`;
-      }
-      return firstSource;
+      const firstSource = item.conditions[0][this.field];
+      const extraConditionsCount = item.conditions.length - 1;
+      const content = extraConditionsCount ? `${firstSource} + ${extraConditionsCount}` : firstSource;
+
+      return (
+        <Tooltip content={content}>
+          <span className="truncate">{content}</span>
+        </Tooltip>
+      );
     },
   },
   {
     field: "enabled",
-    classes: "justify-end",
+    classes: "flex justify-end",
     render: function (item, handlers) {
       return <Switcher checked={item[this.field]} onChange={(event) => handlers?.handleToggleRule(event, item)} />;
     },

diff --git a/browser-extension/tailwind.config.js b/browser-extension/tailwind.config.js
@@ -10,4 +10,9 @@ module.exports = {
       },
     },
   },
+  safelist: [
+    {
+      pattern: /grid-cols-*/,
+    },
+  ],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,9 @@ module.exports = { @@
           },
         },
       },
+      safelist: [
+        {
+          pattern: /grid-cols-*/,
+        },
+      ],
     };