fixed mantine forms and menu + improvements on dev mode with vite

frontend/src/components/NFRegex/AddNewService.tsx

@@ -25,10 +25,10 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             autostart: true
         },
         validate:{
-            name: (value) => value !== ""?true:false,
-            port: (value) => value>0 && value<65536,
-            proto: (value) => ["tcp","udp"].includes(value),
-            ip_int: (value) => value.match(regex_ipv6)?true:false || value.match(regex_ipv4)?true:false
+            name: (value) => value !== "" ? null : "Service name is required",
+            port: (value) => (value>0 && value<65536) ? null : "Invalid port",
+            proto: (value) => ["tcp","udp"].includes(value) ? null : "Invalid protocol",
+            ip_int: (value) => (value.match(regex_ipv6) || value.match(regex_ipv4)) ? null : "Invalid IP address",
         }
     })
 

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

@@ -9,7 +9,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
 
     const form = useForm({
         initialValues: { name:service.name },
-        validate:{ name: (value) => value !== "" }
+        validate:{ name: (value) => value !== ""? null : "Service name is required" }
     })
 
     const close = () =>{

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

@@ -9,6 +9,7 @@ import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
+import { MenuDropDownWithButton } from '../../MainLayout';
 
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
 
@@ -108,13 +109,13 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <><Space w="xl" /><Space w="xl" /></>
                 </MediaQuery>
                 <div className="center-flex">
-                    <Menu>
+                    <MenuDropDownWithButton>
                         <Menu.Label><b>Rename service</b></Menu.Label>
                         <Menu.Item icon={<BiRename size={18} />} onClick={()=>setRenameModal(true)}>Change service name</Menu.Item>
                         <Divider />
                         <Menu.Label><b>Danger zone</b></Menu.Label>
                         <Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
-                    </Menu>
+                    </MenuDropDownWithButton>
                     <Space w="md"/>                        
                     <Tooltip label="Stop service" zIndex={0} color="red" opened={tooltipStopOpened}>
                         <ActionIcon color="red" loading={buttonLoading}