fix: minor graphic fixes

frontend/src/components/NFRegex/ServiceRow/index.module.scss

@@ -15,4 +15,10 @@
     margin-right: 10px;
     margin-bottom: 13px;
     color:#FFF;
+    max-width: 300px;
+    overflow: hidden;
+}
+.name:hover{
+    overflow: auto;
+    transition: 0.1s;
 }

frontend/src/components/NFRegex/ServiceRow/index.tsx

@@ -76,7 +76,14 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             <Grid.Col md={4} xs={12}>
 
                 <div className={isMedium?"center-flex-row":"center-flex"}>
-                    <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
+                    <div className="center-flex">
+                        <Title className={style.name}>
+                            {service.name}
+                        </Title>
+                        <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">
+                            :{service.port}
+                        </Badge>
+                    </div>
                     <Badge style={isMedium?{}:{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
                     {isMedium?null:<Space w="xl" />}
                 </div>

frontend/src/components/RegexView/index.module.scss

@@ -6,9 +6,20 @@
     margin:5px;
 }
 
-.regex_text{
-    padding: 6px;
-    background-color: $third_color;
+.outer_regex_text{
     border-radius: 8px;
+    overflow: hidden;
     margin: 6px;
+}
+
+.regex_text{
+    padding: 10px;
+    background-color: $third_color;
+    overflow-x: hidden;
+    border-radius: 8px;
+}
+
+.regex_text:hover{
+    overflow-x: auto;
+    opacity: 0.8;
 }

frontend/src/components/RegexView/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
+import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip, Box } from '@mantine/core';
 import { useState } from 'react';
 import { RegexFilter } from '../../js/models';
 import { b64decode, errorNotify, getapiobject, okNotify } from '../../js/utils';
@@ -7,6 +7,7 @@ import { BsTrashFill } from "react-icons/bs"
 import YesNoModal from '../YesNoModal';
 import FilterTypeSelector from '../FilterTypeSelector';
 import { FaPause, FaPlay } from 'react-icons/fa';
+import { useClipboard } from '@mantine/hooks';
 
 
 function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
@@ -20,6 +21,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
   const [deleteModal, setDeleteModal] = useState(false);
   const [deleteTooltipOpened, setDeleteTooltipOpened] = useState(false);
   const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
+  const clipboard = useClipboard({ timeout: 500 });
 
   const deleteRegex = () => {
     getapiobject().regexdelete(regexInfo.id).then(res => {
@@ -47,7 +49,12 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
             <Title order={4}>Regex:</Title> 
           </Grid.Col>
           <Grid.Col span={8}>
-            <Text className={style.regex_text}> {regex_expr}</Text>
+            <Box className={style.outer_regex_text}>
+              <Text className={style.regex_text} onClick={()=>{
+                clipboard.copy(regex_expr)
+                okNotify("Regex copied to clipboard!",`The regex '${regex_expr}' has been copied to the clipboard!`)
+              }}>{regex_expr}</Text>
+            </Box>
           </Grid.Col>
           <Grid.Col span={2} className='center-flex'>
             <Space w="xs" />