using bootstrap flex-box instead of padding

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -252,7 +252,7 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
   return (
     <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)} data-testid="open-page-item-control-btn">
       { children ?? (
-        <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control">
+        <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control d-flex align-items-center justify-content-center">
           <i className="icon-options text-muted"></i>
         </DropdownToggle>
       ) }

packages/app/src/styles/_page_list.scss

@@ -5,9 +5,6 @@ body .page-list {
   }
 
   .btn-page-item-control {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     width: 20px;
     height: 20px;
     padding: 0px;

packages/app/src/styles/_subnav.scss

@@ -131,7 +131,6 @@
     .btn-page-item-control {
       width: 32px;
       height: 32px;
-      padding: 4px;
       font-size: 12px;
     }
   }