add responsive style

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

@@ -52,7 +52,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 px-md-2 pl-3 pr-2 search-item-checkbox">
             <input
               className="form-check-input position-relative m-0"
               type="checkbox"

packages/app/src/styles/_search.scss

@@ -177,12 +177,15 @@
     }
     .nav.nav-pills {
       > .page-list-li {
-        &.active {
-          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 !important;
+        // add border when it's more than md size
+        @include media-breakpoint-up(md) {
+          &.active {
+            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 !important;
+            }
           }
         }
         > a {

packages/app/src/styles/theme/_apply-colors.scss

@@ -610,9 +610,12 @@ body.pathname-sidebar {
       }
       .page-list-ul {
         .page-list-li {
-          &.active {
-            background-color: $bgcolor-search-item-active;
-            border-color: $bordercolor-search-item-left-active;
+          // change background color and add border whe it's more than md size
+          @include media-breakpoint-up(md) {
+            &.active {
+              background-color: $bgcolor-search-item-active;
+              border-color: $bordercolor-search-item-left-active;
+            }
           }
         }
       }