From 45c47767b061a7eb8f1115ba80f286f47ae04b8f Mon Sep 17 00:00:00 2001
From: Imad Tassaoui <imadtassaoui@gmail.com>
Date: Mon, 4 Nov 2024 18:12:57 +0100
Subject: [PATCH] fix: ui issues

---
 .../modals/add-acl-modal/RessourcesForm.tsx   | 15 +++++---
 .../modals/add-acl-modal/UsersForm.tsx        | 36 ++++++++++--------
 .../update-acl-modal/UpdateRessourcesForm.tsx | 15 +++++---
 .../update-acl-modal/UpdateUsersForm.tsx      | 33 +++++++++-------
 src/index.css                                 | 12 ++++++
 src/pages/networks/NetworkDetailsPage.tsx     | 18 ++++-----
 src/pages/networks/acl/ACLPage.tsx            | 38 +++++++++----------
 7 files changed, 98 insertions(+), 69 deletions(-)

diff --git a/src/components/modals/add-acl-modal/RessourcesForm.tsx b/src/components/modals/add-acl-modal/RessourcesForm.tsx
index 689d8559..e1382e2c 100644
--- a/src/components/modals/add-acl-modal/RessourcesForm.tsx
+++ b/src/components/modals/add-acl-modal/RessourcesForm.tsx
@@ -123,10 +123,10 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 key={item.id}
                 className="inline-flex items-center gap-1 px-2 py-1 text-sm rounded text-text-primary bg-bg-hover"
               >
-                <TagIcon className="w-3 h-3" />
+                <TagIcon className="w-3 h-3 shrink-0" />
                 {item.name}
                 <XMarkIcon
-                  className="w-4 h-4 cursor-pointer hover:text-text-primary"
+                  className="w-4 h-4 cursor-pointer hover:text-text-primary shrink-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     removeItem(item);
@@ -138,7 +138,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
             ))}
           </div>
         )}
-        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 text-text-secondary" />
+        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 shrink-0 text-text-secondary" />
       </div>
 
       {isOpen && (
@@ -159,7 +159,10 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                   onClick={(e) => e.stopPropagation()}
                   autoComplete="off"
                 />
-                <MagnifyingGlassIcon className="absolute w-4 h-4 left-2 top-2 text-text-secondary" aria-hidden="true" />
+                <MagnifyingGlassIcon
+                  className="absolute w-4 h-4 shrink-0 left-2 top-2 text-text-secondary"
+                  aria-hidden="true"
+                />
               </div>
             </div>
 
@@ -170,7 +173,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 role="option"
                 aria-selected={value.some((v) => v.id === '*')}
               >
-                <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" aria-hidden="true" />
                 <span className="flex-1">All Resources</span>
                 {value.some((v) => v.id === '*') && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
               </div>
@@ -200,7 +203,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                     aria-selected={isSelected}
                     aria-disabled={isDisabled}
                   >
-                    <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                    <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" aria-hidden="true" />
                     <span className="flex-1">{tag.tag_name}</span>
                     {isSelected && !isDisabled && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
                   </div>
diff --git a/src/components/modals/add-acl-modal/UsersForm.tsx b/src/components/modals/add-acl-modal/UsersForm.tsx
index ed0c9f43..88ed70a0 100644
--- a/src/components/modals/add-acl-modal/UsersForm.tsx
+++ b/src/components/modals/add-acl-modal/UsersForm.tsx
@@ -130,10 +130,14 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                 key={item.id}
                 className="inline-flex items-center gap-1 px-2 py-1 text-sm rounded text-text-primary bg-bg-hover"
               >
-                {item.type === 'group' ? <UsersIcon className="w-3 h-3" /> : <UserIcon className="w-3 h-3" />}
+                {item.type === 'group' ? (
+                  <UsersIcon className="w-3 h-3 shrink-0" />
+                ) : (
+                  <UserIcon className="w-3 h-3 shrink-0" />
+                )}
                 {item.name}
                 <XMarkIcon
-                  className="w-4 h-4 cursor-pointer"
+                  className="w-4 h-4 cursor-pointer shrink-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     removeItem(item);
@@ -143,7 +147,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
             ))}
           </div>
         )}
-        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 text-text-secondary" />
+        <ChevronDownIcon className="absolute w-4 h-4 ml-auto shrink-0 top-2 right-2 text-text-secondary" />
       </div>
 
       {isOpen && (
@@ -159,7 +163,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                   placeholder="Search groups and users..."
                   className="w-full pl-8 pr-2 py-1.5 text-sm border rounded-md bg-bg-default border-stroke-default focus:outline-none focus:ring-1 focus:ring-primary-500"
                 />
-                <MagnifyingGlassIcon className="absolute w-4 h-4 left-2 top-2 text-text-secondary" />
+                <MagnifyingGlassIcon className="absolute w-4 h-4 shrink-0 left-2 top-2 text-text-secondary" />
               </div>
             </div>
 
@@ -174,9 +178,9 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                         className="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-button-secondary-fill-hover"
                         onClick={() => toggleGroup(group)}
                       >
-                        <UsersIcon className="w-4 h-4 text-text-secondary" />
+                        <UsersIcon className="w-4 h-4 shrink-0 text-text-secondary" />
                         {group.name}
-                        {value.some((v) => v.id === group.id) && <div className="w-4 h-4 ml-auto">✓</div>}
+                        {value.some((v) => v.id === group.id) && <div className="w-4 h-4 ml-auto shrink-0">✓</div>}
                       </div>
                     ))}
                   </div>
@@ -191,9 +195,9 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                         className="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-button-secondary-fill-hover"
                         onClick={() => toggleItem(user)}
                       >
-                        <UserIcon className="w-4 h-4 text-text-secondary" />
+                        <UserIcon className="w-4 h-4 shrink-0 text-text-secondary" />
                         {user.username}
-                        {value.some((v) => v.id === user.username) && <div className="w-4 h-4 ml-auto">✓</div>}
+                        {value.some((v) => v.id === user.username) && <div className="ml-auto shrink-0">✓</div>}
                       </div>
                     ))}
                   </div>
@@ -208,7 +212,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                       onClick={onManageClick}
                       className="flex items-center justify-center w-full gap-2 px-4 py-2 text-sm transition-colors duration-200 rounded-md bg-button-primary-fill-default hover:bg-button-primary-fill-hover"
                     >
-                      <WrenchIcon className="w-4 h-4" />
+                      <WrenchIcon className="w-4 h-4 shrink-0" />
                       Manage groups and users
                     </button>
                   </Link>
@@ -294,7 +298,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 <TagIcon className="w-3 h-3" />
                 {item.name}
                 <XMarkIcon
-                  className="w-4 h-4 cursor-pointer"
+                  className="w-4 h-4 cursor-pointer shrink-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     removeItem(item);
@@ -304,7 +308,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
             ))}
           </div>
         )}
-        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 text-text-secondary" />
+        <ChevronDownIcon className="absolute w-4 h-4 ml-auto shrink-0 top-2 right-2 text-text-secondary" />
       </div>
 
       {isOpen && (
@@ -320,7 +324,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                   placeholder="Search tags..."
                   className="w-full pl-8 pr-2 py-1.5 text-sm border rounded-md bg-bg-default border-stroke-default focus:outline-none focus:ring-1 focus:ring-primary-500"
                 />
-                <MagnifyingGlassIcon className="absolute w-4 h-4 left-2 top-2 text-text-secondary" />
+                <MagnifyingGlassIcon className="absolute w-4 h-4 shrink-0 left-2 top-2 text-text-secondary" />
               </div>
             </div>
 
@@ -329,9 +333,9 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 className="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-button-secondary-fill-hover"
                 onClick={selectAllTag}
               >
-                <TagIcon className="w-4 h-4 text-text-secondary" />
+                <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" />
                 All Resources
-                {value.some((v) => v.id === '*') && <div className="w-4 h-4 ml-auto">✓</div>}
+                {value.some((v) => v.id === '*') && <div className="w-4 h-4 ml-auto shrink-0">✓</div>}
               </div>
 
               {filteredTags.map((tag) => {
@@ -351,9 +355,9 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                     aria-selected={isSelected}
                     aria-disabled={isDisabled}
                   >
-                    <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                    <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" aria-hidden="true" />
                     <span className="flex-1">{tag.tag_name}</span>
-                    {isSelected && !isDisabled && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
+                    {isSelected && !isDisabled && <div className="w-4 h-4 ml-auto shrink-0 text-primary-500">✓</div>}
                   </div>
                 );
               })}
diff --git a/src/components/modals/update-acl-modal/UpdateRessourcesForm.tsx b/src/components/modals/update-acl-modal/UpdateRessourcesForm.tsx
index 5f480d1b..d3cb4795 100644
--- a/src/components/modals/update-acl-modal/UpdateRessourcesForm.tsx
+++ b/src/components/modals/update-acl-modal/UpdateRessourcesForm.tsx
@@ -123,10 +123,10 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 key={item.id}
                 className="inline-flex items-center gap-1 px-2 py-1 text-sm rounded text-text-primary bg-bg-hover"
               >
-                <TagIcon className="w-3 h-3" />
+                <TagIcon className="w-3 h-3 shrink-0" />
                 {item.name}
                 <XMarkIcon
-                  className="w-4 h-4 cursor-pointer hover:text-text-primary"
+                  className="w-4 h-4 cursor-pointer hover:text-text-primary shrink-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     removeItem(item);
@@ -138,7 +138,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
             ))}
           </div>
         )}
-        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 text-text-secondary" />
+        <ChevronDownIcon className="absolute w-4 h-4 ml-auto shrink-0 top-2 right-2 text-text-secondary" />
       </div>
 
       {isOpen && (
@@ -159,7 +159,10 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                   onClick={(e) => e.stopPropagation()}
                   autoComplete="off"
                 />
-                <MagnifyingGlassIcon className="absolute w-4 h-4 left-2 top-2 text-text-secondary" aria-hidden="true" />
+                <MagnifyingGlassIcon
+                  className="absolute w-4 h-4 shrink-0 left-2 top-2 text-text-secondary"
+                  aria-hidden="true"
+                />
               </div>
             </div>
 
@@ -170,7 +173,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 role="option"
                 aria-selected={value.some((v) => v.id === '*')}
               >
-                <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                <TagIcon className="w-4 h-4 text-text-secondary shrink-0" aria-hidden="true" />
                 <span className="flex-1">All Resources</span>
                 {value.some((v) => v.id === '*') && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
               </div>
@@ -200,7 +203,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                     aria-selected={isSelected}
                     aria-disabled={isDisabled}
                   >
-                    <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                    <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" aria-hidden="true" />
                     <span className="flex-1">{tag.tag_name}</span>
                     {isSelected && !isDisabled && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
                   </div>
diff --git a/src/components/modals/update-acl-modal/UpdateUsersForm.tsx b/src/components/modals/update-acl-modal/UpdateUsersForm.tsx
index 2f39976b..a7d79abd 100644
--- a/src/components/modals/update-acl-modal/UpdateUsersForm.tsx
+++ b/src/components/modals/update-acl-modal/UpdateUsersForm.tsx
@@ -129,10 +129,14 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                 key={item.id}
                 className="inline-flex items-center gap-1 px-2 py-1 text-sm rounded text-text-primary bg-bg-hover"
               >
-                {item.type === 'group' ? <UsersIcon className="w-3 h-3" /> : <UserIcon className="w-3 h-3" />}
+                {item.type === 'group' ? (
+                  <UsersIcon className="w-3 h-3 shrink-0" />
+                ) : (
+                  <UserIcon className="w-3 h-3 shrink-0" />
+                )}
                 {item.name}
                 <XMarkIcon
-                  className="w-4 h-4 cursor-pointer"
+                  className="w-4 h-4 cursor-pointer shrink-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     removeItem(item);
@@ -142,7 +146,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
             ))}
           </div>
         )}
-        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 text-text-secondary" />
+        <ChevronDownIcon className="absolute w-4 h-4 ml-auto shrink-0 top-2 right-2 text-text-secondary" />
       </div>
 
       {isOpen && (
@@ -158,7 +162,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                   placeholder="Search groups and users..."
                   className="w-full pl-8 pr-2 py-1.5 text-sm border rounded-md bg-bg-default border-stroke-default focus:outline-none focus:ring-1 focus:ring-primary-500"
                 />
-                <MagnifyingGlassIcon className="absolute w-4 h-4 left-2 top-2 text-text-secondary" />
+                <MagnifyingGlassIcon className="absolute w-4 h-4 shrink-0 left-2 top-2 text-text-secondary" />
               </div>
             </div>
 
@@ -173,7 +177,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                         className="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-button-secondary-fill-hover"
                         onClick={() => toggleGroup(group)}
                       >
-                        <UsersIcon className="w-4 h-4 text-text-secondary" />
+                        <UsersIcon className="w-4 h-4 shrink-0 text-text-secondary" />
                         {group.name}
                         {value.some((v) => v.id === group.id) && <div className="w-4 h-4 ml-auto">✓</div>}
                       </div>
@@ -190,7 +194,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                         className="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-button-secondary-fill-hover"
                         onClick={() => toggleItem(user)}
                       >
-                        <UserIcon className="w-4 h-4 text-text-secondary" />
+                        <UserIcon className="w-4 h-4 shrink-0 text-text-secondary" />
                         {user.username}
                         {value.some((v) => v.id === user.username) && <div className="w-4 h-4 ml-auto">✓</div>}
                       </div>
@@ -207,7 +211,7 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                       onClick={onManageClick}
                       className="flex items-center justify-center w-full gap-2 px-4 py-2 text-sm transition-colors duration-200 rounded-md bg-button-primary-fill-default hover:bg-button-primary-fill-hover"
                     >
-                      <WrenchIcon className="w-4 h-4" />
+                      <WrenchIcon className="w-4 h-4 shrink-0" />
                       Manage groups and users
                     </button>
                   </Link>
@@ -300,10 +304,10 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 key={item.id}
                 className="inline-flex items-center gap-1 px-2 py-1 text-sm rounded text-text-primary bg-bg-hover"
               >
-                <TagIcon className="w-3 h-3" />
+                <TagIcon className="w-3 h-3 shrink-0" />
                 {item.name}
                 <XMarkIcon
-                  className="w-4 h-4 cursor-pointer hover:text-text-primary"
+                  className="w-4 h-4 cursor-pointer shrink-0 hover:text-text-primary"
                   onClick={(e) => {
                     e.stopPropagation();
                     removeItem(item);
@@ -315,7 +319,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
             ))}
           </div>
         )}
-        <ChevronDownIcon className="absolute w-4 h-4 ml-auto top-2 right-2 text-text-secondary" />
+        <ChevronDownIcon className="absolute w-4 h-4 ml-auto shrink-0 top-2 right-2 text-text-secondary" />
       </div>
 
       {isOpen && (
@@ -336,7 +340,10 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                   onClick={(e) => e.stopPropagation()}
                   autoComplete="off"
                 />
-                <MagnifyingGlassIcon className="absolute w-4 h-4 left-2 top-2 text-text-secondary" aria-hidden="true" />
+                <MagnifyingGlassIcon
+                  className="absolute w-4 h-4 shrink-0 left-2 top-2 text-text-secondary"
+                  aria-hidden="true"
+                />
               </div>
             </div>
 
@@ -347,7 +354,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                 role="option"
                 aria-selected={value.some((v) => v.id === '*')}
               >
-                <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" aria-hidden="true" />
                 <span className="flex-1">All Resources</span>
                 {value.some((v) => v.id === '*') && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
               </div>
@@ -377,7 +384,7 @@ const TagSelectDropdown: React.FC<TagSelectDropdownProps> = ({
                     aria-selected={isSelected}
                     aria-disabled={isDisabled}
                   >
-                    <TagIcon className="w-4 h-4 text-text-secondary" aria-hidden="true" />
+                    <TagIcon className="w-4 h-4 shrink-0 text-text-secondary" aria-hidden="true" />
                     <span className="flex-1">{tag.tag_name}</span>
                     {isSelected && !isDisabled && <div className="w-4 h-4 ml-auto text-primary-500">✓</div>}
                   </div>
diff --git a/src/index.css b/src/index.css
index eff34c91..d5a6cb3e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,6 +22,18 @@
   vertical-align: 0;
 }
 
+.ant-btn-icon {
+  position: relative;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.react-sigma-control button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 :root {
   /*White*/
   --color-white: #ffffff;
diff --git a/src/pages/networks/NetworkDetailsPage.tsx b/src/pages/networks/NetworkDetailsPage.tsx
index 9fb5614a..eb015d2a 100644
--- a/src/pages/networks/NetworkDetailsPage.tsx
+++ b/src/pages/networks/NetworkDetailsPage.tsx
@@ -2180,8 +2180,8 @@ export default function NetworkDetailsPage(props: PageProps) {
       <div className="network-hosts-tab-content" style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
         <Row justify="space-between" align="middle" style={{ marginBottom: '1rem', width: '100%' }}>
           {isServerEE && <RacDownloadBanner />}
-          <div className="flex flex-col w-full gap-4 sm:flex-row">
-            <div className="flex flex-col flex-grow gap-4 sm:flex-row">
+          <div className="inline-flex flex-col w-full gap-4 md:flex-row">
+            <div className="inline-flex flex-col flex-grow gap-4 md:flex-row">
               <Input
                 size="large"
                 placeholder="Search nodes"
@@ -2189,7 +2189,7 @@ export default function NetworkDetailsPage(props: PageProps) {
                 onChange={(ev) => setSearchHost(ev.target.value)}
                 prefix={<SearchOutlined />}
                 allowClear
-                style={{ maxWidth: '240px' }}
+                style={{ maxWidth: '240px', height: '40px' }}
               />
               <div className="flex flex-wrap gap-2">
                 {filters.map((filter) => (
@@ -2304,11 +2304,11 @@ export default function NetworkDetailsPage(props: PageProps) {
                           >
                             {getExtendedNode(node, store.hostsCommonDetails).is_static &&
                             !getExtendedNode(node, store.hostsCommonDetails).is_user_node ? (
-                              <DocumentIcon className="w-4 h-4 text-text-primary" />
+                              <DocumentIcon className="w-4 h-4 shrink-0 text-text-primary" />
                             ) : getExtendedNode(node, store.hostsCommonDetails).is_user_node ? (
-                              <UserIcon className="w-4 h-4 text-text-primary" />
+                              <UserIcon className="w-4 h-4 shrink-0 text-text-primary" />
                             ) : (
-                              <ServerIcon className="w-4 h-4 text-text-primary" />
+                              <ServerIcon className="w-4 h-4 shrink-0 text-text-primary" />
                             )}
                             <span>{node.is_static ? node.static_node?.clientid : hostName}</span>
                           </Link>
@@ -2379,8 +2379,8 @@ export default function NetworkDetailsPage(props: PageProps) {
 
                         return (
                           <span className="flex items-center gap-2">
-                            <ServerIcon className="w-4 h-4 text-text-primary" />
-                            <span>{gatewayName}</span>
+                            <ServerIcon className="w-4 h-4 shrink-0 text-text-primary" />
+                            <span className="w-full break-words">{gatewayName}</span>
                           </span>
                         );
                       } else {
@@ -4282,9 +4282,9 @@ export default function NetworkDetailsPage(props: PageProps) {
           <FloatButton
             icon={<QuestionCircleOutlined />}
             type="primary"
-            style={{ left: store.isSidebarCollapsed ? 90 : 210 }}
             badge={{ dot: true }}
             onClick={toggleFloatingButton}
+            className={`fixed bottom-4 ${store.isSidebarCollapsed ? 'left-4' : 'left-52'}`}
           />
         )}
         {!showFloatingButton && (
diff --git a/src/pages/networks/acl/ACLPage.tsx b/src/pages/networks/acl/ACLPage.tsx
index d48dba23..3433201c 100644
--- a/src/pages/networks/acl/ACLPage.tsx
+++ b/src/pages/networks/acl/ACLPage.tsx
@@ -173,8 +173,8 @@ export const ACLPage = ({ networkId, notify, hostsTabContainerAddHostsRef, reloa
           </p>
         </div>
       </div>
-      <div className="flex justify-between w-full">
-        <div className="flex gap-2">
+      <div className="flex flex-col justify-between w-full gap-4 md:flex-row">
+        <div className="flex flex-col gap-3 md:flex-row">
           <Input
             size="large"
             placeholder="Search policies"
@@ -182,14 +182,15 @@ export const ACLPage = ({ networkId, notify, hostsTabContainerAddHostsRef, reloa
             onChange={(ev) => setSearchHost(ev.target.value)}
             prefix={<SearchOutlined />}
             allowClear
-            style={{ marginBottom: '.5rem' }}
+            className="w-[300px]"
           />
-          <div className="flex gap-2">
+
+          <div className="flex gap-2 px-4 pb-2 -mx-4 overflow-x-auto sm:mx-0 sm:px-0 sm:overflow-x-visible">
             {policyFilter.map((filter) => (
               <button
                 key={filter.name}
                 onClick={() => setPolicyType(filter.name)}
-                className={`flex items-center gap-2 px-3 py-2 rounded text-sm transition-colors duration-200 ${
+                className={`flex items-center gap-2 px-3 py-2 rounded text-sm transition-colors duration-200 flex-shrink-0 ${
                   policyType === filter.name
                     ? 'bg-button-secondary-fill-default text-text-primary'
                     : 'bg-transparent text-text-secondary hover:bg-button-secondary-fill-hover'
@@ -201,16 +202,15 @@ export const ACLPage = ({ networkId, notify, hostsTabContainerAddHostsRef, reloa
             ))}
           </div>
         </div>
-        <Col xs={24} md={6} className="add-host-dropdown-button">
-          <Button
-            type="primary"
-            style={{ width: '170px', marginBottom: '.5rem' }}
-            onClick={() => setAddPolicyModal(true)}
-            ref={hostsTabContainerAddHostsRef}
-          >
-            <span>Add Policy</span>
-          </Button>
-        </Col>
+
+        <Button
+          type="primary"
+          className="w-full sm:w-[170px]"
+          onClick={() => setAddPolicyModal(true)}
+          ref={hostsTabContainerAddHostsRef}
+        >
+          <span>Add Policy</span>
+        </Button>
       </div>
       <Table
         scroll={{ x: true }}
@@ -228,9 +228,9 @@ export const ACLPage = ({ networkId, notify, hostsTabContainerAddHostsRef, reloa
               <div className="flex items-center gap-2 text-sm-semibold">
                 <span>
                   {policyType === 'device-policy' ? (
-                    <ComputerDesktopIcon className="w-4 h-4" />
+                    <ComputerDesktopIcon className="w-4 h-4 shrink-0" />
                   ) : (
-                    <UsersIcon className="w-4 h-4" />
+                    <UsersIcon className="w-4 h-4 shrink-0" />
                   )}
                 </span>
                 <span>{policyType === 'device-policy' ? 'Resources' : 'Users'}</span>
@@ -272,7 +272,7 @@ export const ACLPage = ({ networkId, notify, hostsTabContainerAddHostsRef, reloa
                     <Tooltip key={index} title={displayValue}>
                       <Tag>
                         <div className="flex items-center gap-1">
-                          <Icon className="w-3 h-3" />
+                          <Icon className="w-3 h-3 shrink-0" />
                           <span>{displayValue}</span>
                         </div>
                       </Tag>
@@ -304,7 +304,7 @@ export const ACLPage = ({ networkId, notify, hostsTabContainerAddHostsRef, reloa
                     <Tooltip key={index} title={displayValue}>
                       <Tag>
                         <div className="flex items-center gap-1">
-                          <TagIcon className="w-3 h-3" />
+                          <TagIcon className="w-3 h-3 shrink-0" />
                           <span>{displayValue}</span>
                         </div>
                       </Tag>