fix: adjust web ui item style

src/components/setting/mods/web-ui-item.tsx

@@ -1,5 +1,11 @@
 import { useState } from "react";
-import { IconButton, Stack, TextField, Typography } from "@mui/material";
+import {
+  Divider,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
 import {
   CheckRounded,
   CloseRounded,
@@ -32,7 +38,8 @@ const WebUIItem = (props: Props) => {
 
   if (editing || onlyEdit) {
     return (
-      <Stack spacing={1} direction="row" mt={1} mb={2} alignItems="center">
+      <>
+        <Stack spacing={0.75} direction="row" mt={1} mb={1} alignItems="center">
           <TextField
             fullWidth
             size="small"
@@ -64,23 +71,31 @@ const WebUIItem = (props: Props) => {
             <CloseRounded fontSize="inherit" />
           </IconButton>
         </Stack>
+        <Divider />
+      </>
     );
   }
 
+  const html = value
+    ?.replace("%host", "<span>%host</span>")
+    .replace("%port", "<span>%port</span>")
+    .replace("%secret", "<span>%secret</span>");
+
   return (
-    <Stack spacing={1} direction="row" alignItems="center" mt={1} mb={2}>
+    <>
+      <Stack spacing={0.75} direction="row" alignItems="center" mt={1} mb={1}>
         <Typography
           component="div"
           width="100%"
           title={value}
-        sx={{
+          color={value ? "text.primary" : "text.secondary"}
-          overflow: "hidden",
+          sx={({ palette }) => ({
-          textOverflow: "ellipsis",
+            "> span": {
-          whiteSpace: "nowrap",
+              color: palette.primary.main,
-        }}
+            },
-      >
+          })}
-        {value || "NULL"}
+          dangerouslySetInnerHTML={{ __html: html || "NULL" }}
-      </Typography>
+        />
         <IconButton
           size="small"
           title="Open URL"
@@ -109,6 +124,8 @@ const WebUIItem = (props: Props) => {
           <DeleteRounded fontSize="inherit" />
         </IconButton>
       </Stack>
+      <Divider />
+    </>
   );
 };