refactor: update text overflow loop style

Author: fecommunity

client/src/components/SystemNotification/index.module.scss

@@ -2,6 +2,7 @@
   margin-top: 16px;
   background-color: var(--bg-box);
   overflow: hidden;
+  width: 100%;
   > span {
     color: var(---brand-danger) !important;
   }
@@ -10,4 +11,22 @@
       color: var(--primary-color) !important;
     }
   }
-}
+}
+
+.textLoop {
+  white-space: wrap;
+  width: 100%;
+  overflow: hidden;
+  div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100% !important;
+  }
+}
+
+.overflowEllipse {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

client/src/components/SystemNotification/index.tsx

@@ -16,11 +16,13 @@ const SystemNotification: React.FC = () => {
       type="info"
       icon={<BellFilled size={16} />}
       message={
-        <TextLoop interval={5000}>
-          {notices.map((notice) => (
-            <span dangerouslySetInnerHTML={{ __html: notice }} />
-          ))}
-        </TextLoop>
+        <div className={style.textLoop}>
+          <TextLoop interval={5000}>
+            {notices.map((notice) => (
+              <span className={style.overflowEllipse} dangerouslySetInnerHTML={{ __html: notice }} />
+            ))}
+          </TextLoop>
+        </div>
       }
     />
   ) : null;