125692 add global in scss

apps/app/src/components/PageList/PageListItemS.module.scss

@@ -1,34 +1,7 @@
-.page-title {
-  flex: 1;
-  line-height: 1.2;
-}
-
-.page-list-ul {
-  padding-left: 0;
-  margin: 0;
-
-  > li {
-    list-style: none;
-
-    > a {
-      padding: 0px;
-      color: inherit;
-
-      &:hover {
-        color: inherit;
-      }
-    }
-  }
-
-  .picture {
-    width: 16px;
-    height: 16px;
-    vertical-align: text-bottom;
-
-    &.picture-md {
-      width: 20px;
-      height: 20px;
-    }
+.page-list-items :global {
+  .page-title {
+    flex: 1;
+    line-height: 1.2;
   }
 
   .page-list-meta {
@@ -37,39 +10,6 @@
     > span {
       margin-right: 0.3rem;
     }
-
-    i {
-      margin-right: 2px;
-    }
-
-    .footstamp-icon {
-      svg {
-        width: 14px;
-        height: 14px;
-      }
-    }
-    .seen-users-count {
-      &.strength-0,
-      &.strength-1,
-      &.strength-2 {
-        font-weight: bold;
-      }
-      &.strength-3 {
-        font-weight: normal;
-      }
-      &.strength-4 {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  // after second level indent
-  .page-list-ul {
-    padding-left: 2rem;
   }
 
-  // override .page-list-ul
-  &.page-list-ul-flat {
-    padding-left: 0;
-  }
 }

apps/app/src/components/PageList/PageListItemS.tsx

@@ -35,10 +35,10 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
   return (
     <>
       {isNarrowView ? (
-        <div className="d-flex">
+        <div className={`d-flex ${styles['page-list-items']}`}>
           <UserPicture user={page.lastUpdateUser} noLink={noLink} />
           <Clamp lines={2}>
-            <div className={`mx-2 text-break ${noLink ? 'page-title' : ''}`}>
+            <div className={`mx-2 page-title ${noLink ? 'text-break' : ''}`}>
               {pagePathElement}
             </div>
           </Clamp>