modify checkbox and selectbox

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -47,7 +47,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
       >
         <div className="d-flex h-100">
           {/* checkbox */}
-          <div className="form-check d-flex align-items-center justify-content-center px-2 search-item-checkbox">
+          <div className="form-check d-flex align-items-center justify-content-center pr-2 search-item-checkbox">
             <input
               className="form-check-input item-checkbox-input"
               type="checkbox"
@@ -60,13 +60,13 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               checked={isChecked}
             />
           </div>
-          <div className="search-item-text p-3 flex-grow-1 border">
+          <div className="search-item-text p-3 flex-grow-1">
             {/* page path */}
             <div className="item-path">
               <i className="icon-fw icon-home"></i>
               {pagePathElem}
             </div>
-            <div className="d-flex align-items-center mb-2">
+            <div className="d-flex align-items-center mb-2 position-relative">
               {/* Picture */}
               <span className="user-picture mr-2">
                 <UserPicture user={pageData.lastUpdateUser} />
@@ -78,7 +78,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
                 <PageListMeta page={pageData} bookmarkCount={pageMeta.bookmarkCount} />
               </div>
               {/* doropdown icon includes page control buttons */}
-              <div className="ml-auto">
+              <div className="position-absolute item-control">
                 <PageItemControl page={pageData} onClickDeleteButton={props.onClickDeleteButton} isEnableActions={isEnableActions} />
               </div>
             </div>

packages/app/src/styles/_search.scss

@@ -183,10 +183,12 @@
     .nav.nav-pills {
       > .page-list-li {
         &.active {
-          // add this negative margin to avoid inner elements of .page-list-li.active
-          // moving to right side by border-left's px size.
-          margin-left: -3px;
           border-left: solid 3px transparent;
+          .search-item-checkbox {
+            // subtract 3px from padding left applied by .search-item-checkbox
+            // as 3px of border-left is added above
+            padding-left: 4px;
+          }
         }
         > a {
           word-break: break-all;
@@ -233,7 +235,7 @@
   }
   // checkbox
   .search-item-checkbox {
-    padding: 0 14px;
+    padding-left: 7px;
     .item-checkbox-input {
       position: relative; // to apply padding and margin
       margin: 0;
@@ -259,6 +261,12 @@
     .search-result-list-snippet {
       line-height: 20px;
     }
+    .item-control {
+      right: 0;
+      .grw-btn-page-management {
+        padding: 7px;
+      }
+    }
   }
   .search-result-content {
     padding-bottom: 36px;