gui: reposive? yeah responsive

frontend/src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { ActionIcon, Divider, Image, Menu, Tooltip, MediaQuery, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core';
+import { ActionIcon, Divider, Image, Menu, Tooltip, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core';
 import style from "./index.module.scss";
-import { errorNotify, getmainpath, logout } from '../../js/utils';
+import { errorNotify, getmainpath, isLargeScreen, logout } from '../../js/utils';
 import { AiFillHome } from "react-icons/ai"
 import { useNavigate } from 'react-router-dom';
 import { FaLock } from 'react-icons/fa';
@@ -32,10 +32,11 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
   const [resetFiregexModal, setResetFiregexModal] = useState(false);
   const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false);
   const [tooltipLogoutOpened,setTooltipLogoutOpened] = useState(false);
-
+  const isLarge = isLargeScreen()
+  console.log(isLarge)
   return <Header height={100} className={style.header} {...other}>
         <Space w="lg" />
-        <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
+        {isLarge?null:<div>
           <Burger
             opened={navOpen}
             className={style.navbtn}
@@ -43,7 +44,7 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
             size="sm"
             mr="xl"
           />
-        </div></MediaQuery>
+        </div>}
         <div className={style.divlogo}>
           <Tooltip zIndex={0} label="Home" openDelay={1000}color="dark" position="right" >
             <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>

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

@@ -1,11 +1,11 @@
-import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
 import { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
 import { nfregex, Service, serviceQueryKey } from '../utils';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils';
+import { errorNotify, isMediumScreen, okNotify, regex_ipv4 } from '../../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
@@ -25,6 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
     const [renameModal, setRenameModal] = useState(false)
+    const isMedium = isMediumScreen()
 
     const stopService = async () => {
         setButtonLoading(true)
@@ -73,32 +74,17 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     return <>
         <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
             <Grid.Col md={4} xs={12}>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
-                    <div className="center-flex-row">
-                        <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 color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
-                    </div>
-                </div></MediaQuery>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
-                    <div className="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>
-                        <Badge style={{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
-                        <Space w="xl" />
-                    </div>
-                </div></MediaQuery>
 
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <Space h="xl" />
-                </MediaQuery>
+                <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>
+                    <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>
+                {!isMedium?<Space h="xl" />:null}
             </Grid.Col>
             
             <Grid.Col className="center-flex" md={8} xs={12}>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+                {!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 
                 <div className="center-flex-row">
                     <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
@@ -107,12 +93,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <Space h="xs" />
                     <Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
                 </div>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+                {isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 <div className="center-flex">
                     <MenuDropDownWithButton>
                         <Menu.Label><b>Rename service</b></Menu.Label>
@@ -145,13 +126,10 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} />
                     <Space w="xl" />
                 </div>:null}
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
-                
+                {isMedium?<><Space w="xl" /><Space w="xl" /></>:null}                
             </Grid.Col>
         </Grid>
-        <hr style={{width:"100%"}}/>
+        <Divider size="md" style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

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

@@ -9,6 +9,11 @@
     @extend .center-flex;
 }
 
+.row-mobile{
+    @extend .row;
+    @extend .center-flex-row;
+}
+
 .name{
     font-size: 2.3em;
     font-weight: bolder;

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

@@ -4,7 +4,7 @@ import { FaPlay, FaStop } from 'react-icons/fa';
 import { porthijack, Service } from '../utils';
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, okNotify } from '../../../js/utils';
+import { errorNotify, isMediumScreen, okNotify } from '../../../js/utils';
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
@@ -23,6 +23,7 @@ function ServiceRow({ service }:{ service:Service }) {
     const [renameModal, setRenameModal] = useState(false)
     const [changeDestModal, setChangeDestModal] = useState(false)
     const portInputRef = React.createRef<HTMLInputElement>()
+    const isMedium = isMediumScreen()
 
     const form = useForm({
         initialValues: { proxy_port:service.proxy_port },
@@ -89,7 +90,7 @@ function ServiceRow({ service }:{ service:Service }) {
     }
 
     return <>
-        <div className={style.row} style={{width:"100%"}}>
+        <div className={isMedium?style.row:style.row_mobile} style={{width:"100%"}}>
             <Space w="xl" /><Space w="xl" />
             <div>
                 <div className="center-flex-row">
@@ -105,6 +106,8 @@ function ServiceRow({ service }:{ service:Service }) {
             </div>
         
             <div className='flex-spacer' />
+            {isMedium?null:<Space h="xl" />}
+            <div className='center-flex'>
             <div className="center-flex-row">
                 <Badge color="lime" radius="sm" size="md" variant="filled">
                     FROM {service.ip_src} : {service.public_port}
@@ -119,7 +122,7 @@ function ServiceRow({ service }:{ service:Service }) {
                                 size="xs"
                                 variant="unstyled"
                                 style={{
-                                    width: (6+form.values.proxy_port.toString().length*6.2) +"px"
+                                    width: (10+form.values.proxy_port.toString().length*6.2) +"px"
                                 }}
                                 className={style.portInput}
                                 onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}}
@@ -161,10 +164,13 @@ function ServiceRow({ service }:{ service:Service }) {
                     </ActionIcon>
                 </Tooltip>
             </div>
+            </div>
+            {isMedium?null:<Space h="xl" />}
             <Space w="xl" /><Space w="xl" />
                 
         </div>
-        <hr style={{width:"100%"}}/>
+        <Divider size="sm" style={{width:"100%"}}/>
+
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${service.public_port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

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

@@ -1,10 +1,10 @@
-import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
 import { useState } from 'react';
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, okNotify } from '../../../js/utils';
+import { errorNotify, isMediumScreen, okNotify } from '../../../js/utils';
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { TbNumbers } from 'react-icons/tb';
 import { BiRename } from 'react-icons/bi'
@@ -32,6 +32,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [choosePortModal, setChoosePortModal] = useState(false)
     const [renameModal, setRenameModal] = useState(false)
 
+    const isMedium = isMediumScreen()
+
     const stopService = async () => {
         setButtonLoading(true)
         await regexproxy.servicestop(service.id).then(res => {
@@ -101,44 +103,21 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     return <>
         <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
             <Grid.Col md={4} xs={12}>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
-                    <div className="center-flex-row">
+                <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.public_port}</Badge></div>
                     <Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
                 </div>
-                </div></MediaQuery>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
-                    <div className="center-flex">
-                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
-                        <Space w="xl" />
-                        <Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
-                    </div>
-                </div></MediaQuery>
-                
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <Space h="xl" />
-                </MediaQuery>
+                {!isMedium?<Space h="xl" />:null}
             </Grid.Col>
             
             <Grid.Col className="center-flex" md={8} xs={12}>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
-                
+                {!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 <div className="center-flex-row">
                     <Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
                     <Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge>
                     <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
                 </div>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+                {isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 <div className="center-flex">
                     <MenuDropDownWithButton>
                         <Menu.Label><b>Rename service</b></Menu.Label>
@@ -185,9 +164,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} />
                     <Space w="xl" />
                 </div>:null}
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+                {!isMedium?<><Space w="xl" /><Space w="xl" /></>:null}
                 
             </Grid.Col>
         </Grid>
@@ -198,7 +175,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             action={stopService}
             opened={stopModal}
         />
-        <hr style={{width:"100%"}}/>
+        <Divider size="md" style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

frontend/src/js/utils.tsx

@@ -7,6 +7,7 @@ import { regexproxy } from "../components/RegexProxy/utils";
 import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
 import { Buffer } from "buffer"
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { useMediaQuery } from "@mantine/hooks";
 
 export const IS_DEV = import.meta.env.DEV
 
@@ -201,3 +202,11 @@ export function b64encode(data:number[]|string){
 export function b64decode(regexB64:string){
     return Buffer.from(regexB64, "base64").toString()
 }
+
+export function isMediumScreen(){
+    return useMediaQuery('(min-width: 600px)');
+}
+
+export function isLargeScreen(){
+    return useMediaQuery('(min-width: 992px)');
+}

frontend/src/pages/Firewall/index.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import { BsPlusLg, BsTrashFill } from "react-icons/bs"
 import { rem } from '@mantine/core';
 import { ActionType, Protocol, Rule, RuleMode, firewall, firewallRulesQuery } from "../../components/Firewall/utils";
-import { errorNotify, getErrorMessage, makeid, okNotify } from "../../js/utils";
-import { useListState } from '@mantine/hooks';
+import { errorNotify, getErrorMessage, isMediumScreen, makeid, okNotify } from "../../js/utils";
+import { useListState, useMediaQuery } from '@mantine/hooks';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { TbGripVertical, TbReload } from "react-icons/tb";
 import { useQueryClient } from "@tanstack/react-query";
@@ -37,6 +37,8 @@ export const Firewall = () => {
     const [applyChangeModal, setApplyChangeModal] = useState(false)
     const [settingsModal, setSettingsModal] = useState(false)
     const theme = useMantineTheme();
+    const isMedium = useMediaQuery(`(min-width: 950px)`)
+    const isSmall = useMediaQuery(`(max-width: 600px)`)
 
     const [updateMevalueinternal, internalUpdateme] = useState(false)
     const updateMe = () => {
@@ -100,6 +102,13 @@ export const Firewall = () => {
       }
     }
 
+    const condDiv = (val:React.ReactNode, cond:boolean) => {
+      if (cond)
+        return <div>{val}</div>
+      else
+        return val
+    }
+
     const emptyRuleAdd = () => {
       handlers.insert(0,{
         rule_id: makeid(30),
@@ -201,6 +210,7 @@ export const Firewall = () => {
                 <TbGripVertical style={{ width: rem(30), height: rem(40) }} />
               </div>
               <Space w="sm" />
+              <div className={isMedium?"center-flex":"center-flex-row"} style={{width:"100%"}}>
               <div className="center-flex-row" style={{width:"100%"}}>
                 <div className="center-flex" style={{width:"97%"}}>
                 <Switch
@@ -297,24 +307,26 @@ export const Firewall = () => {
                   </div>
                 </div>
               </div>
-              <div className="center-flex-row">
-                  <ActionTypeSelector
-                      value={item.action}
-                      onChange={(value)=>{item.action = value as ActionType;updateMe()}}
-                      style={{width:"100%"}}
-                    />
-                    <Space h="xs" />
-                  <ModeSelector
+              {!isMedium?<Space h="sm" />:null}
+              <div className={isMedium?"center-flex-row":"center-flex"} style={isMedium?{}:{width:"100%", justifyContent:"space-around"}}>
+                  {condDiv(<>{condDiv(<ModeSelector
                       value={item.mode}
                       onChange={(value)=>{item.mode = value as RuleMode;updateMe()}}
                       style={{width:"100%"}}
-                  />
+                    />, !isMedium)}
                   <Space h="xs" />
-                  <ProtocolSelector
+                  {condDiv(<ProtocolSelector
                       value={item.proto}
                       onChange={(value)=>{item.proto = value as Protocol;updateMe()}}
                       style={{width:"100%"}}
-                    />
+                    />, !isMedium)}</>, isSmall)}
+                  <Space h="xs" />
+                  {condDiv(<ActionTypeSelector
+                    value={item.action}
+                    onChange={(value)=>{item.action = value as ActionType;updateMe()}}
+                    style={{width:"100%"}}
+                  />, !isMedium)}
+              </div>
               </div>
               </div>
               <Space h="md" />
@@ -329,9 +341,10 @@ export const Firewall = () => {
     return <>
         <Space h="sm" />
         <LoadingOverlay visible={rules.isLoading} />
-        <div className='center-flex'>
+        <div className={isMedium?'center-flex':'center-flex-row'}>
             <Title order={3}>Firewall Rules</Title>
-            <div className='flex-spacer' />
+            {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
+            <div className='center-flex'>
               Enabled: <Space w="sm" /> <Switch checked={fwEnabled} onChange={switchState} />
               <Space w="sm" />
               Policy:
@@ -340,6 +353,9 @@ export const Firewall = () => {
                   value={currentPolicy}
                   onChange={(value)=>setCurrentPolicy(value as ActionType)}
               />
+            </div>
+            {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
+            <div className='center-flex'>
               <Space w="xs" />
               <Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
               <Space w="xs" />
@@ -370,14 +386,14 @@ export const Firewall = () => {
                   ><TiTick size={22} /></ActionIcon>
               </Tooltip>
             </div>
+        </div>
         <Space h="xl" />
-        
+        <Divider />
         {items.length > 0?<DragDropContext
           onDragEnd={({ destination, source }) =>
             handlers.reorder({ from: source.index, to: destination?.index || 0 })
           }
         >
-          <Divider />
           <Space h="md" />
           <Droppable droppableId="dnd-list" direction="vertical">
             {(provided) => (

frontend/src/pages/NFRegex/index.tsx

@@ -1,10 +1,10 @@
-import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
 import { useNavigate, useParams } from 'react-router-dom';
 import ServiceRow from '../../components/NFRegex/ServiceRow';
 import { nfregexServiceQuery } from '../../components/NFRegex/utils';
-import { errorNotify, getErrorMessage } from '../../js/utils';
+import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
 import AddNewService from '../../components/NFRegex/AddNewService';
 import AddNewRegex from '../../components/AddNewRegex';
 import { useQueryClient } from '@tanstack/react-query';
@@ -20,7 +20,7 @@ function NFRegex({ children }: { children: any }) {
     const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
     const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
     const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
-
+    const isMedium = isMediumScreen()
     const services = nfregexServiceQuery()
 
     useEffect(()=> {
@@ -32,15 +32,19 @@ function NFRegex({ children }: { children: any }) {
 
     return <>
     <Space h="sm" />
-    <div className='center-flex'>
+    <div className={isMedium?'center-flex':'center-flex-row'}>
         <Title order={4}>Netfilter Regex</Title>
-        <div className='flex-spacer' />
+        {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
+        <div className='center-flex' >
             <Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
             <Space w="xs" />
             <Badge size="sm" color="yellow" variant="filled">Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
             <Space w="xs" />
             <Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
             <Space w="xs" />
+        </div>
+        {isMedium?null:<Space h="md" />}
+        <div className='center-flex' >
             { srv?
             <Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}>
                 <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -61,6 +65,9 @@ function NFRegex({ children }: { children: any }) {
                 onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
             </Tooltip>
         </div>
+    </div>
+    <Space h="md" />
+    <Divider size="md" style={{width:"100%"}}/>
     <div id="service-list" className="center-flex-row">
         {srv?null:<>
             <LoadingOverlay visible={services.isLoading} />

frontend/src/pages/PortHijack/index.tsx

@@ -1,9 +1,9 @@
-import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
 import ServiceRow from '../../components/PortHijack/ServiceRow';
 import { porthijackServiceQuery } from '../../components/PortHijack/utils';
-import { errorNotify, getErrorMessage } from '../../js/utils';
+import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
 import AddNewService from '../../components/PortHijack/AddNewService';
 import { useQueryClient } from '@tanstack/react-query';
 import { TbReload } from 'react-icons/tb';
@@ -16,7 +16,7 @@ function PortHijack() {
     const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
     const queryClient = useQueryClient()
     const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
-
+    const isMedium = isMediumScreen()
 
     const services = porthijackServiceQuery()
 
@@ -29,9 +29,10 @@ function PortHijack() {
 
     return <>
         <Space h="sm" />
-        <div className='center-flex'>
+        <div className={isMedium?'center-flex':'center-flex-row'}>
             <Title order={4}>Hijack port to proxy</Title>
-            <div className='flex-spacer' />
+            {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
+            <div className='center-flex'>
                 <Badge size="sm" color="yellow" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
                 <Space w="xs" />
                 <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
@@ -47,8 +48,11 @@ function PortHijack() {
                     onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
                 </Tooltip>
             </div>
+        </div>
+        <Space h="md" /><Divider size="sm" style={{width:"100%"}}/>
         <div id="service-list" className="center-flex-row">
             <LoadingOverlay visible={services.isLoading} />
+            
             {(services.data && services.data.length > 0) ?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<>
             <Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
                 <Space h="xl" /> <Space h="xl" />