Merge pull request #5478 from weseek/imprv/89790-improve-page-item-control-style-on-pagelist

imprv: 89790  page item control style on pagelist

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/components/PageList/PageListItemL.tsx

@@ -207,7 +207,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
               </div>
 
               {/* doropdown icon includes page control buttons */}
-              <div className="item-control ml-auto">
+              <div className="ml-auto">
                 <PageItemControl
                   pageId={pageData._id}
                   pageInfo={isIPageInfoForListing(pageMeta) ? pageMeta : undefined}

packages/app/src/styles/_page_list.scss

@@ -4,6 +4,12 @@ body .page-list {
     line-height: 1.6em;
   }
 
+  .btn-page-item-control {
+    width: 20px;
+    height: 20px;
+    padding: 0px;
+  }
+
   .page-list-ul {
     padding-left: 0;
     margin: 0;

packages/app/src/styles/_subnav.scss

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