Release-6.2.0 (#8705 )

* bump versions to 6.2.0 * release reports * changelog * update lock file
Bump semver from 7.3.8 to 7.5.3 in /tools/doc (#8699 )
2026-09-16 18:13:06 +00:00 · 2023-06-26 12:24:30 -04:00 · 2023-06-26 04:04:34 -04:00 · 2023-06-23 17:14:43 +02:00 · 2023-06-23 09:13:55 -04:00 · 2023-06-22 04:31:29 -04:00
434 changed files with 54297 additions and 41698 deletions
@@ -52,6 +52,8 @@ runs:
        if [[ -n "${{ inputs.apa-proxy }}" ]]; then
          echo "APA proxy set."
          echo "PROXY_HOST_BPM=${E2E_HOST_APA}" >> $GITHUB_ENV
+          echo "PROXY_HOST_ECM=${E2E_IDENTITY_HOST_APA}" >> $GITHUB_ENV
+          echo "HOST_SSO=${E2E_IDENTITY_HOST_APA}" >> $GITHUB_ENV
        fi

    - name: install aws cli
@@ -111,7 +113,7 @@ runs:
      run: |
        set -u;
        ./node_modules/@alfresco/adf-cli/bin/adf-cli init-aae-env \
-          --oauth "$E2E_HOST" \
+          --oauth "$E2E_IDENTITY_HOST_APA" \
          --host "$E2E_HOST_APA" \
          --modelerUsername "$E2E_MODELER_USERNAME" \
          --modelerPassword "$E2E_MODELER_PASSWORD" \
@@ -119,7 +121,7 @@ runs:
          --devopsPassword "$E2E_DEVOPS_PASSWORD" \
          --clientId 'alfresco' || exit 1

-    - name: variables sanification
+    - name: variables sanitization
      env:
        FOLDER: "${{ inputs.e2e-test-folder }}"
        PROVIDER: "${{ inputs.e2e-test-provider }}"
@@ -22,7 +22,7 @@ runs:
      - name: install NPM
        uses: actions/setup-node@v3
        with:
-          node-version: 14
+          node-version-file: '.nvmrc'
          cache-dependency-path: package-lock.json
      - name: get latest tag sha
        id: tag-sha
@@ -56,6 +56,3 @@ runs:
        uses: ./.github/actions/before-install
        with:
          act: ${{ inputs.act }}
-      - name: link nx executable
-        run: sudo ln -s $(npm bin)/nx /usr/bin/nx
-        shell: bash
@@ -1,98 +0,0 @@
-name: "upstream adf"
-
-on:
-  workflow_call:
-    inputs:
-      repo_to_update:
-          description: Repository to update
-          type: string
-          required: false
-          default: alfresco-applications
-  workflow_dispatch:
-    inputs:
-      cluster_operation:
-        description: trigger adf test
-        type: choice
-        required: true
-        options:
-          - TRIGGER_ALPHA_ADF
-        default: TRIGGER_ALPHA_ADF
-      repo_to_update:
-        description: Repository to update
-        type: choice
-        required: true
-        options:
-          - all
-          - alfresco-content-app
-          - alfresco-applications
-          - alfresco-apps
-        default: all
-
-env:
-  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-  GITHUB_BRANCH: ${{ github.ref_name }}
-  GH_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
-  GH_BUILD_DIR: ${{ github.workspace }}
-  GH_COMMIT: ${{ github.sha }}
-  BUILD_ID: ${{ github.run_id }}
-  GH_RUN_NUMBER: ${{ github.run_attempt }}
-  GH_BUILD_NUMBER: ${{ github.run_id }}
-  JOB_ID: ${{ github.run_id }}
-  PROXY_HOST_BPM: ${{ secrets.E2E_HOST }}
-  E2E_HOST_APA: ${{ secrets.E2E_HOST_APA }}
-  E2E_HOST: ${{ secrets.E2E_HOST }}
-  E2E_USERNAME: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
-  E2E_PASSWORD: ${{ secrets.E2E_PASSWORD }}
-  E2E_ADMIN_EMAIL_IDENTITY: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
-  E2E_ADMIN_PASSWORD_IDENTITY: ${{ secrets.E2E_ADMIN_PASSWORD_IDENTITY }}
-  USERNAME_ADF: ${{ secrets.E2E_USERNAME }}
-  PASSWORD_ADF: ${{ secrets.E2E_PASSWORD }}
-  URL_HOST_ADF: ${{ secrets.URL_HOST_ADF }}
-  IDENTITY_ADMIN_EMAIL: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
-  IDENTITY_ADMIN_PASSWORD: ${{ secrets.E2E_ADMIN_PASSWORD_IDENTITY }}
-  AWS_S3_BUCKET_ACTIVITI_LICENSE: ${{ secrets.AWS_S3_BUCKET_ACTIVITI_LICENSE }}
-  HOST_SSO: ${{ secrets.HOST_SSO }}
-  LOG_LEVEL: "ERROR"
-  E2E_LOG_LEVEL: "ERROR"
-  E2E_MODELER_USERNAME: ${{ secrets.E2E_MODELER_USERNAME }}
-  E2E_MODELER_PASSWORD: ${{ secrets.E2E_MODELER_PASSWORD }}
-  EXTERNAL_ACS_HOST: ${{ secrets.EXTERNAL_ACS_HOST }}
-  E2E_DEVOPS_USERNAME: ${{ secrets.E2E_DEVOPS_USERNAME }}
-  E2E_DEVOPS_PASSWORD: ${{ secrets.E2E_DEVOPS_PASSWORD }}
-  USERNAME_SUPER_ADMIN_ADF: ${{ secrets.USERNAME_SUPER_ADMIN_ADF }}
-  PASSWORD_SUPER_ADMIN_ADF: ${{ secrets.PASSWORD_SUPER_ADMIN_ADF }}
-  HR_USER: ${{ secrets.HR_USER }}
-  HR_USER_PASSWORD: ${{ secrets.HR_USER_PASSWORD }}
-  NPM_REGISTRY_ADDRESS: ${{ secrets.NPM_REGISTRY_ADDRESS }}
-  NPM_REGISTRY_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }}
-  DOCKER_REPOSITORY_USER: ${{ secrets.DOCKER_REPOSITORY_USER }}
-  DOCKER_REPOSITORY_PASSWORD: ${{ secrets.DOCKER_REPOSITORY_PASSWORD }}
-  DOCKER_REPOSITORY_DOMAIN: ${{ secrets.DOCKER_REPOSITORY_DOMAIN }}
-  DOCKER_REPOSITORY_STORYBOOK: "${{ secrets.DOCKER_REPOSITORY_DOMAIN }}/alfresco/storybook"
-  DOCKER_REPOSITORY: "${{ secrets.DOCKER_REPOSITORY_DOMAIN }}/alfresco/demo-shell"
-  NODE_OPTIONS: "--max-old-space-size=5120"
-  GH_PACKAGES_READ_ONLY_TOKEN: "${{ secrets.HYLAND_GH_PACKAGES_READ_ONLY_TOKEN }}"
-
-jobs:
-  trigger_adf:
-    name: trigger adf
-    runs-on: ubuntu-latest
-    steps:
-        - name: Checkout repository
-          uses: actions/checkout@v3
-          with:
-            fetch-depth: 0
-        - name: install NPM
-          uses: actions/setup-node@v3
-          with:
-            node-version: 14
-            cache-dependency-path: package-lock.json
-        - name: Trigger Alpha ADF child build
-          shell: bash
-          if: ${{ contains(github.event.head_commit.message, '[trigger adf]') || inputs.cluster_operation == 'TRIGGER_ALPHA_ADF' || github.event.schedule == '0 12 * * *'  }}
-          run: |
-            npm install github-api
-            ./scripts/github/update/update-project.sh -p $GH_BUILD_NUMBER -t $GH_TOKEN -v alpha -c $GH_COMMIT -r ${{ inputs.repo_to_update }}
-            exit $?
-
@@ -18,6 +18,7 @@ env:
  JOB_ID: ${{ github.run_id }}
  PROXY_HOST_BPM: ${{ secrets.E2E_HOST }}
  E2E_HOST_APA: ${{ secrets.E2E_HOST_APA }}
+  E2E_IDENTITY_HOST_APA: ${{ secrets.E2E_IDENTITY_HOST_APA }}
  E2E_HOST: ${{ secrets.E2E_HOST }}
  E2E_USERNAME: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
  E2E_PASSWORD: ${{ secrets.E2E_PASSWORD }}
@@ -70,4 +71,6 @@ jobs:
  run-e2e:
    name: run e2e
    uses: ./.github/workflows/pull-request.yml
+    with:
+      cron-run: true
    secrets: inherit
@@ -1,20 +0,0 @@
-name: "cron upstream daily"
-
-on:
-  schedule:
-    - cron: '0 12 * * *'  
-
-jobs:
-  adf-upstream-alpha-alfresco-aca:
-    name: trigger upstream alpha for alfresco-content-app    
-    uses: ./.github/workflows/adf_alpha.yml
-    secrets: inherit
-    with:
-      repo_to_update: alfresco-content-app
-
-  adf-upstream-alpha-alfresco-apps:
-    name: trigger upstream alpha for alfresco-applications    
-    uses: ./.github/workflows/adf_alpha.yml
-    secrets: inherit
-    with:
-      repo_to_update: alfresco-applications
@@ -3,7 +3,7 @@ name: "git-tag"
 on:
  workflow_call:
    inputs:
-      dry-run-release:
+      dry-run-flag:
        description: 'enable dry-run on artifact push'
        required: false
        type: boolean
@@ -26,6 +26,7 @@ env:
  GH_BUILD_NUMBER: ${{ github.run_id }}
  JOB_ID: ${{ github.run_id }}
  PROXY_HOST_BPM: ${{ secrets.E2E_HOST }}
+  E2E_IDENTITY_HOST_APA: ${{ secrets.E2E_IDENTITY_HOST_APA }}
  E2E_HOST_APA: ${{ secrets.E2E_HOST_APA }}
  E2E_HOST: ${{ secrets.E2E_HOST }}
  E2E_USERNAME: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
@@ -61,7 +62,7 @@ env:
  DOCKER_REPOSITORY: "${{ secrets.DOCKER_REPOSITORY_DOMAIN }}/alfresco/demo-shell"
  NPM_REGISTRY_ADDRESS: ${{ secrets.NPM_REGISTRY_ADDRESS }}
  NPM_REGISTRY_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }}
-  GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
+  BOT_GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
  REPO_OWNER: "Alfresco"
  REPO_NAME: "alfresco-ng2-components"
  DEMO_SHELL_DIR: "./dist/demo-shell"
@@ -84,7 +85,7 @@ jobs:
    uses: ./.github/workflows/release.yml
    secrets: inherit
    with:
-      dry-run-release: false
+      dry-run-flag: false

  setup:
    needs: release
@@ -92,18 +93,18 @@ jobs:
    name: "Release tag"
    runs-on: ubuntu-22.04
    env:
-      GITHUB_TOKEN: $GH_TOKEN
+      GITHUB_TOKEN: $BOT_GITHUB_TOKEN
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
      - id: set-dryrun
        uses: ./.github/actions/enable-dryrun
        with:
-          dry-run-flag: ${{ inputs.dry-run-release }}
+          dry-run-flag: ${{ inputs.dry-run-flag }}
      - name: install NPM
        uses: actions/setup-node@v3
        with:
-          node-version: 14
+          node-version-file: '.nvmrc'
      - name: "Release tag"
        run: |
          git fetch --all --quiet
@@ -3,7 +3,7 @@ name: "pull-request"
 on:
  workflow_call:
    inputs:
-      dry-run-release:
+      dry-run-flag:
        description: 'enable dry-run on artifact push'
        required: false
        type: boolean
@@ -13,6 +13,11 @@ on:
        required: false
        type: string
        default: false
+      cron-run:
+        description: 'disables jobs which should not run when cron runs e2es'
+        required: false
+        type: boolean
+        default: false
  pull_request:
    types: [opened, synchronize, reopened]
    branches:
@@ -38,6 +43,7 @@ env:
  GH_BUILD_NUMBER: ${{ github.run_id }}
  JOB_ID: ${{ github.run_id }}
  PROXY_HOST_BPM: ${{ secrets.E2E_HOST }}
+  E2E_IDENTITY_HOST_APA: ${{ secrets.E2E_IDENTITY_HOST_APA }}
  E2E_HOST_APA: ${{ secrets.E2E_HOST_APA }}
  E2E_HOST: ${{ secrets.E2E_HOST }}
  E2E_USERNAME: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
@@ -96,11 +102,11 @@ jobs:

      - name: Check package-lock.json version
        run: |
-          if [[ $(jq '.lockfileVersion == 2' package-lock.json) == "true" ]] ; then
-            echo -e "\033[31mpackage-lock must be version 1\033[0m"
-            exit 1
+          if [[ $(jq '.lockfileVersion == 3' package-lock.json) == "true" ]] ; then
+            echo "package-lock.json has a correct version"
          else
-            echo -e "\033[32mpackage-lock.json has a correct version\033[0m"
+            echo "package-lock must be version 3"
+            exit 1
          fi

  check-if-pr-is-approved:
@@ -197,9 +203,9 @@ jobs:
      - name: install
        run: |
          npm ci
-          nx run cli:bundle
-          nx run testing:bundle
-      - run: nx print-affected $NX_CALCULATION_FLAGS
+          npx nx run cli:bundle
+          npx nx run testing:bundle
+      - run: npx nx print-affected $NX_CALCULATION_FLAGS
      - uses: ./.github/actions/upload-node-modules-and-artifacts

  unit-tests:
@@ -213,15 +219,15 @@ jobs:
      matrix:
        unit-tests:
          - name: content-services
-            exclude: "insights,core,extensions,process-services,process-services-cloud"
+            exclude: "insights,core,extensions,process-services,process-services-cloud,eslint-plugin-eslint-angular"
          - name: core
-            exclude: "insights,content-services,process-services,process-services-cloud"
+            exclude: "insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular"
          - name: insights
-            exclude: "core,extensions,content-services,process-services-cloud,process-services"
+            exclude: "core,extensions,content-services,process-services-cloud,process-services,eslint-plugin-eslint-angular"
          - name: process-services
-            exclude: "core,extensions,content-services,process-services-cloud,insights"
+            exclude: "core,extensions,content-services,process-services-cloud,insights,eslint-plugin-eslint-angular"
          - name: process-cloud
-            exclude: "insights,core,extensions,content-services,process-services"
+            exclude: "insights,core,extensions,content-services,process-services,eslint-plugin-eslint-angular"
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
@@ -231,7 +237,7 @@ jobs:
      - uses: ./.github/actions/download-node-modules-and-artifacts
      - name: Run unit tests
        run: |
-          /usr/bin/xvfb-run --auto-servernum nx affected:test $NX_CALCULATION_FLAGS --exclude=${{ matrix.unit-tests.exclude }}
+          /usr/bin/xvfb-run --auto-servernum npx nx affected:test $NX_CALCULATION_FLAGS --exclude=${{ matrix.unit-tests.exclude }}

  lint:
    # long timeout required when cache has to be recreated
@@ -246,7 +252,7 @@ jobs:
          fetch-depth: 0 # Fetch all history for all tags and branches
      - uses: ./.github/actions/setup
      - uses: ./.github/actions/download-node-modules-and-artifacts
-      - run: nx affected --target=lint $NX_CALCULATION_FLAGS
+      - run: npx nx affected --target=lint $NX_CALCULATION_FLAGS

  build-libs:
    # long timeout required when cache has to be recreated
@@ -261,9 +267,9 @@ jobs:
          fetch-depth: 0 # Fetch all history for all tags and branches
      - uses: ./.github/actions/setup
      - uses: ./.github/actions/download-node-modules-and-artifacts
-      - run: nx affected:build $NX_CALCULATION_FLAGS --prod
-      - run: nx build demoshell --configuration production
-      - run: nx affected --target=build-storybook $NX_CALCULATION_FLAGS --configuration ci
+      - run: npx nx affected:build $NX_CALCULATION_FLAGS --prod
+      - run: npx nx build demoshell --configuration production
+      - run: npx nx affected --target=build-storybook $NX_CALCULATION_FLAGS --configuration=ci --parallel=1
      - uses: ./.github/actions/upload-node-modules-and-artifacts

  e2e-storybook:
@@ -450,6 +456,7 @@ jobs:
          deps: ${{ matrix.e2e-test.deps }}

  PR-forbidden-labels:
+    if: ${{ inputs.cron-run == '' || inputs.cron-run == 'false' }}
    runs-on: ubuntu-latest
    steps:
      - id: checkoutRepo
@@ -481,6 +488,14 @@ jobs:
    name: Final Results
    needs: [check-if-pr-is-approved, check-package-lock, setup, unit-tests, lint, build-libs, e2e, e2e-storybook]
    steps:
+      - uses: slackapi/slack-github-action@v1.23.0
+        name: Nofify QA failure
+        if: ${{ github.event_name == 'schedule' && contains(needs.*.result, 'failure') }}
+        env:
+          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
+        with:
+          channel-id: 'C016SMNNL8L' #guild-channel
+          slack-message: "🔴 Warning: The daily ADF cronjob failed\nWorkflow run : <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n"
      - name: workflow failure
        run: exit 1
        if: ${{ contains(needs.*.result, 'failure') }}
@@ -490,3 +505,4 @@ jobs:
      - name: workflow success
        run: exit 0
        if: ${{ contains(needs.*.result, 'success') }}
+
@@ -3,7 +3,7 @@ name: "release"
 on:
  workflow_call:
    inputs:
-      dry-run-release:
+      dry-run-flag:
        description: 'enable dry-run on artifact push'
        required: false
        type: boolean
@@ -29,6 +29,7 @@ env:
  GH_BUILD_NUMBER: ${{ github.run_id }}
  JOB_ID: ${{ github.run_id }}
  PROXY_HOST_BPM: ${{ secrets.E2E_HOST }}
+  E2E_IDENTITY_HOST_APA: ${{ secrets.E2E_IDENTITY_HOST_APA }}
  E2E_HOST_APA: ${{ secrets.E2E_HOST_APA }}
  E2E_HOST: ${{ secrets.E2E_HOST }}
  E2E_USERNAME: ${{ secrets.E2E_ADMIN_EMAIL_IDENTITY }}
@@ -97,8 +98,8 @@ jobs:
      - name: install
        run: |
          npm ci
-          nx run cli:bundle
-          nx run testing:bundle
+          npx nx run cli:bundle
+          npx nx run testing:bundle
      - uses: ./.github/actions/upload-node-modules-and-artifacts

  release-demoshell:
@@ -115,7 +116,7 @@ jobs:
      - id: set-dryrun
        uses: ./.github/actions/enable-dryrun
        with:
-          dry-run-flag: ${{ inputs.dry-run-release }}
+          dry-run-flag: ${{ inputs.dry-run-flag }}
      - uses: ./.github/actions/setup
        with:
          enable-cache: false
@@ -123,7 +124,7 @@ jobs:
      - uses: ./.github/actions/download-node-modules-and-artifacts
      - name: release Demoshell docker
        run: |
-          nx build demoshell --configuration production
+          npx nx build demoshell --configuration production
          . ./scripts/github/release/docker-tag.sh
          ./scripts/github/release/release-demoshell-docker.sh ${{ steps.set-dryrun.outputs.dryrun }}

@@ -141,22 +142,22 @@ jobs:
      - id: set-dryrun
        uses: ./.github/actions/enable-dryrun
        with:
-          dry-run-flag: ${{ inputs.dry-run-release }}
+          dry-run-flag: ${{ inputs.dry-run-flag }}
      - uses: ./.github/actions/setup
        with:
          enable-cache: false
          enable-node-modules-cache: false
-          act: ${{ inputs.dry-run-release }}
+          act: ${{ inputs.dry-run-flag }}
      - uses: ./.github/actions/download-node-modules-and-artifacts
      - name: release Storybook docker
        run: |
-          nx run stories:build-storybook --configuration ci
+          npx nx run stories:build-storybook --configuration ci
          . ./scripts/github/release/docker-tag.sh
          ./scripts/github/release/release-storybook-docker.sh ${{ steps.set-dryrun.outputs.dryrun }}

  release-npm:
    needs: [setup]
-    timeout-minutes: 15
+    timeout-minutes: 30
    if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
    runs-on: ubuntu-22.04
    permissions:
@@ -174,7 +175,7 @@ jobs:
      - id: set-dryrun
        uses: ./.github/actions/enable-dryrun
        with:
-          dry-run-flag: ${{ inputs.dry-run-release }}
+          dry-run-flag: ${{ inputs.dry-run-flag }}
      - uses: ./.github/actions/download-node-modules-and-artifacts
      - name: check PR number
        id: action
@@ -191,24 +192,24 @@ jobs:
        run: |
          set -u;
          ./scripts/github/build/bumpversion.sh
-          nx affected:build $NX_CALCULATION_FLAGS --prod --exclude="demoshell" --skip-nx-cache
-          nx affected $NX_CALCULATION_FLAGS --target=pretheme
+          npx nx affected:build $NX_CALCULATION_FLAGS --prod --exclude="demoshell" --skip-nx-cache
+          npx nx affected $NX_CALCULATION_FLAGS --target=pretheme
      - uses: actions/setup-node@v3
        name: release libraries GH registry
        with:
-          node-version: 14
+          node-version-file: '.nvmrc'
          registry-url: 'https://npm.pkg.github.com'
          scope: '@alfresco'
-      - run: nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=$TAG_NPM || exit 1
+      - run: npx nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=$TAG_NPM || exit 1
        env:
          NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
      - uses: actions/setup-node@v3
        name: release libraries Npm registry
        with:
-          node-version: 14
+          node-version-file: '.nvmrc'
          registry-url: 'https://${{ vars.NPM_REGISTRY_ADDRESS }}'
          scope: '@alfresco'
-      - run: nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=$TAG_NPM || exit 1
+      - run: npx nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=$TAG_NPM || exit 1
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }}

@@ -38,7 +38,7 @@ jobs:
            const tagVersion = process.env.TAG_VERSION;
            console.log('tagVersion:',tagVersion);
            const getLatestVersionOf = require('./scripts/github/update/latest-version-of.js');
-            
+
            const { hasVersionNew: hasVersionNewJS, latestVersion: latestVersionJS } = await getLatestVersionOf({github, context, dependencyName: 'js-api', tagVersion});
            console.log('hasVersionNewJS', hasVersionNewJS)
            console.log('latestVersionJS', latestVersionJS)
@@ -99,7 +99,7 @@ jobs:
      - name: setup NPM
        uses: actions/setup-node@v3
        with:
-          node-version: 14.15.4
+          node-version-file: '.nvmrc'
          cache-dependency-path: package-lock.json
      - name: "General :: dbpci-install"
        run: |
@@ -113,10 +113,29 @@ jobs:
        run: |

          migrateDependenciesJS() {
-              echo "Update JS dependencies to: ${PACKAGE_VERSION_JS}"
-              echo "Calling migration JS"
-              npx nx migrate @alfresco/js-api@${PACKAGE_VERSION_JS}
-              echo "Migration JS done"
+            echo "Update JS dependencies to: ${PACKAGE_VERSION_JS}"
+            echo "Calling migration JS"
+            npx nx migrate @alfresco/js-api@${PACKAGE_VERSION_JS}
+            echo "Migration JS done"
+          }
+
+          migrateLibDependenciesJS() {
+            eval projects=( "cli"
+              "core"
+              "content-services"
+              "process-services"
+              "process-services-cloud"
+              "insights"
+              "testing"
+              "extensions" )
+
+            projectslength=${#projects[@]}
+            for (( i=0; i<${projectslength}; i++ ));
+            do
+              echo "Update JS dependencies in adf-${projects[$i]} to: ${PACKAGE_VERSION_JS}"
+              DESTDIR="lib/${projects[$i]}"
+              sed -i "${sedi[@]}" "s/\"@alfresco\/js-api\": \".*\"/\"@alfresco\/js-api\": \">=${PACKAGE_VERSION_JS}\"/g"  ${DESTDIR}/package.json
+            done
          }

          regeneratePackageLock() {
@@ -132,6 +151,7 @@ jobs:

          if [[ "$IS_JS_AFFECTED" == "true" ]]; then
            migrateDependenciesJS
+            migrateLibDependenciesJS
          fi

          regeneratePackageLock
@@ -32,5 +32,5 @@ out-tsc
 e2e-result-*
 licenses.txt
 .DS_Store
-
 .angular
+NX
@@ -1 +1 @@
-14
+18
@@ -1,46 +0,0 @@
-# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
-version: v1.14.1
-ignore: {}
-# patches apply the minimum changes required to fix a vulnerability
-patch:
-  SNYK-JS-HTTPSPROXYAGENT-469131:
-    - '@alfresco/adf-cli > npm-registry-fetch > make-fetch-happen > https-proxy-agent':
-        patched: '2019-11-20T10:48:59.194Z'
-    - '@alfresco/js-api > @alfresco/adf-cli > npm-registry-fetch > make-fetch-happen > https-proxy-agent':
-        patched: '2019-11-20T10:48:59.194Z'
-  SNYK-JS-TREEKILL-536781:
-    - snyk > snyk-sbt-plugin > tree-kill:
-        patched: '2019-12-12T00:35:06.820Z'
-  SNYK-JS-LODASH-567746:
-    - snyk > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > @snyk/dep-graph > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > inquirer > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-config > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-mvn-plugin > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-nodejs-lockfile-parser > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-nuget-plugin > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > @snyk/dep-graph > graphlib > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-go-plugin > graphlib > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-nodejs-lockfile-parser > graphlib > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > @snyk/snyk-cocoapods-plugin > @snyk/dep-graph > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-nuget-plugin > dotnet-deps-parser > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > snyk-php-plugin > @snyk/composer-lockfile-parser > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > @snyk/snyk-cocoapods-plugin > @snyk/dep-graph > graphlib > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > @snyk/snyk-cocoapods-plugin > @snyk/cocoapods-lockfile-parser > @snyk/ruby-semver > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
-    - snyk > @snyk/snyk-cocoapods-plugin > @snyk/cocoapods-lockfile-parser > @snyk/dep-graph > graphlib > lodash:
-        patched: '2020-05-01T00:35:43.233Z'
@@ -1,54 +0,0 @@
-# Browser Support
-
-This page gives a guide to Browser support and polyfills.
-
-Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
-
- Angular (all ADF components)
- Moment.js (many ADF components)
- PDF.js (`ng2-alfresco-viewer` component)
- Raphael.js (`ng2-alfresco-diagrams`, `ng2-alfresco-analytics`)
- Chart.js (`ng2-alfresco-analytics`)
-
-## Browser polyfills 
-
-### Angular
-
-Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular browser support. 
-
-ADF (demo shell) imports by default the following set of recommended polyfills:
-
- [core-js](https://www.npmjs.com/package/core-js) (ES6 standard support)
-
-### 3rd party libraries
-
-Please refer to the following list of [popular polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) for HTML5 cross-browser compatibility.
-
-ADF (demo shell) imports by default the following set of recommended polyfills:
-
- [intl](https://www.npmjs.com/package/intl), Polyfill the ECMA-402 Intl API (except collation), **IE**/**Safari**
- [pdfjs compatibility](https://www.npmjs.com/package/pdfjs-dist), Portable Document Format (PDF) library that is built with HTML5, **IE**
-
-## Example
-
-```html
-
-<!-- Polyfill(s) for Safari (pre-10.x) -->
-<script src="node_modules/intl/dist/Intl.min.js"></script>
-<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-<!-- Polyfill(s) for older browsers -->
-<script src="node_modules/core-js/client/shim.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-<!-- Polyfill(s) for pdf support -->
-<script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
-
-<!-- Polyfill(s) for dialogs -->
-<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-```
-
-See the [demo shell](demo-shell/index.html) example project for
-further information and source code.
@@ -1,6 +1,6 @@
 # 1. Generate licenses

-FROM node:16.20-alpine3.17 AS builder
+FROM node:18.16-alpine3.17 AS builder
 WORKDIR /usr/src/alfresco
 COPY package.json package.json

@@ -1,5 +0,0 @@
-# Introduction
-
-See the [introduction page](docs/user-guide/adf-introduction.md) in our
-[documentation](docs/README.md) for an overview of ADF along with links
-to useful starting points.
@@ -1,11 +0,0 @@
-# Prerequisites for building and running apps with the Alfresco Application Development Framework
-
-See our tutorial
-[Creating your first ADF Application](docs/tutorials/creating-your-first-adf-application.md)
-for full details of what you need to install before using ADF.
-
-If you experience [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
-issues then you should also read our
-[CORS guide](ALFRESCOCORS.md)
-to see the full range of solutions available.
- 
@@ -1,34 +1,29 @@
 # Alfresco Application Development Framework (ADF)

-| branch | status |
-| --- | --- |
-| master | [![git-tag](https://github.com/Alfresco/alfresco-ng2-components/actions/workflows/git-tag.yml/badge.svg)](https://github.com/Alfresco/alfresco-ng2-components/actions/workflows/git-tag.yml) |
-| develop | [![cron schedule](https://github.com/Alfresco/alfresco-ng2-components/actions/workflows/cron.yml/badge.svg)](https://github.com/Alfresco/alfresco-ng2-components/actions/workflows/cron.yml)|
-
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d9eb873741da403bb3284778102372e7)](https://www.codacy.com/app/Alfresco/alfresco-ng2-components?utm_source=github.com&utm_medium=referral&utm_content=Alfresco/alfresco-ng2-components&utm_campaign=badger)
-[![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-<p>
-  <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
-     <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
-  </a>
-</p
-
 ## Introduction

-See the [Introduction page](INTRODUCTION.md) to get started with the Alfresco Application Development Framework.
+See the [introduction page](docs/user-guide/adf-introduction.md) in our
+[documentation](docs/README.md) for an overview of ADF along with links
+to useful starting points.

 ## Prerequisites

-Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration. see the prerequisites section in [creating your first ADF Application](./docs/tutorials/creating-your-first-adf-application.md) for full details.
+```text
+Node: 18.x
+NPM: 9.x
+``` 
+
+Also, check out the tutorial [Creating your first ADF Application](docs/tutorials/creating-your-first-adf-application.md)
+for full details on what you may need to install before using ADF.
+
+### See also
+
+- [Node Version Manager](docs/tutorials/nvm.md)
+- [CORS guide](ALFRESCOCORS.md)

 ## Components

-You can find the sources for all ADF components in the
-[`lib`](/lib) folder.
-
-Full documentation for all components is available at the
-[ADF Component Catalog](https://alfresco.github.io/adf-component-catalog/).
+You can find the sources for all ADF components in the [`lib`](/lib) folder.

 ## Libraries

@@ -47,28 +42,18 @@ A separate application showcasing integration of components can be found
 [here](https://github.com/Alfresco/alfresco-ng2-components/tree/master/demo-shell).
 The app has examples of basic interaction for both APS and ACS components.

-## Yeoman generators
+## Application generator for Yeoman

-To speed up the development of your ADF application, use the
-[Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app).
-This will create a full working project with all the right libraries and tools.
-
-<p align="center">
-  <img title="yeoman generator" src='https://github.com/yeoman/media/blob/master/optimized/yeoman-150x150-opaque.png' alt='yeoman logo'  />
-</p>
+To speed up the development, you can use the
+[Generator for Yeoman](https://github.com/Alfresco/generator-ng2-alfresco-app).

 ## Browser Support

 All components are supported in the following browsers:

-|**Browser**   	   |**Version**   	|
-|---        	   |---  	        |
-|Chrome     	   |Latest       	|
-|Safari (OS X)     |9.x          	|
-|Firefox*    	   |Latest       	|
-|Edge       	   |13, 14     	    |
-|Internet Explorer |11     	        |
-
-* Due to a [known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880) in Firefox, the Alfresco Upload Component does not currently support folder upload functionality on Firefox.
-
-See the [Browser Support](BROWSER-SUPPORT.md) article for more details.
+|**Browser** |**Version** |
+|--- |--- |
+| Chrome | Latest |
+| Safari | Latest |
+| Firefox | Latest |
+| Edge | Latest |
@@ -56,11 +56,6 @@
                "input": "demo-shell/src/app/components/lazy-loading/i18n",
                "output": "/resources/lazy-loading/i18n"
              },
-              {
-                "glob": "**/*",
-                "input": "dist/libs/core/lib/prebuilt-themes",
-                "output": ""
-              },
              {
                "glob": "**/*",
                "input": "lib/core/src/lib/assets",
@@ -163,7 +158,6 @@
                "input": "lib/core/src/lib/styles/prebuilt/adf-purple-green.scss",
                "bundleName": "adf-purple-green"
              },
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -272,7 +266,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'demo-shell/**/*.ts'"
+                      "command": "npx cspell 'demo-shell/**/*.ts'"
                  }
              ]
          }
@@ -339,7 +333,7 @@
            "sourceMap": true,
            "codeCoverage": true,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css"
+              "demo-shell/src/styles.scss"
            ]
          }
        },
@@ -366,7 +360,6 @@
            "configDir": "lib/core/.storybook",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -388,7 +381,6 @@
            "outputDir": "dist/storybook/core",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -407,7 +399,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'lib/core/**/*.ts'"
+                      "command": "npx cspell 'lib/core/**/*.ts'"
                  }
              ]
          }
@@ -417,7 +409,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/stylelint lib/core/**/*.scss --config stylelint-config.json"
+                      "command": "npx stylelint lib/core/**/*.scss --config stylelint-config.json"
                  }
              ]
          }
@@ -427,7 +419,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/license-checker --production  --failOn 'GPL;GPL-2.0' > licenses.txt"
+                      "command": "npx license-checker --production  --failOn 'GPL;GPL-2.0' > licenses.txt"
                  }
              ]
          }
@@ -437,7 +429,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail"
+                      "command": "npx webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail"
                  }
              ]
          }
@@ -506,7 +498,6 @@
            "configDir": "lib/content-services/.storybook",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -528,7 +519,6 @@
            "outputDir": "dist/storybook/content-services",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -547,7 +537,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'lib/content-services/**/*.ts'"
+                      "command": "npx cspell 'lib/content-services/**/*.ts'"
                  }
              ]
          }
@@ -557,7 +547,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/stylelint lib/content-services/**/*.scss --config stylelint-config.json"
+                      "command": "npx stylelint lib/content-services/**/*.scss --config stylelint-config.json"
                  }
              ]
          }
@@ -623,7 +613,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'lib/process-services/**/*.ts'"
+                      "command": "npx cspell 'lib/process-services/**/*.ts'"
                  }
              ]
          },
@@ -632,7 +622,7 @@
                "options": {
                "commands": [
                    {
-                        "command": "$(npm bin)/stylelint lib/process-services/**/*.scss --config stylelint-config.json"
+                        "command": "npx stylelint lib/process-services/**/*.scss --config stylelint-config.json"
                    }
                ]
            }
@@ -643,7 +633,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/stylelint lib/process-services-cloud/**/*.scss --config stylelint-config.json"
+                      "command": "npx stylelint lib/process-services-cloud/**/*.scss --config stylelint-config.json"
                  }
              ]
          }
@@ -712,7 +702,6 @@
            "configDir": "lib/process-services-cloud/.storybook",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -734,7 +723,6 @@
            "outputDir": "dist/storybook/process-services-cloud",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -754,7 +742,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/playwright test --config='e2e-playwright/playwright.config.ts'"
+                      "command": "npx playwright test --config='e2e-playwright/playwright.config.ts'"
                  }
              ]
          }
@@ -764,7 +752,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'lib/process-services-cloud/**/*.ts'"
+                      "command": "npx cspell 'lib/process-services-cloud/**/*.ts'"
                  }
              ]
          }
@@ -774,7 +762,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/stylelint lib/process-services-cloud/**/*.scss --config stylelint-config.json"
+                      "command": "npx stylelint lib/process-services-cloud/**/*.scss --config stylelint-config.json"
                  }
              ]
          }
@@ -840,7 +828,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'lib/insights/**/*.ts'"
+                      "command": "npx cspell 'lib/insights/**/*.ts'"
                  }
              ]
          }
@@ -850,7 +838,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/stylelint lib/insights/**/*.scss --config stylelint-config.json"
+                      "command": "npx stylelint lib/insights/**/*.scss --config stylelint-config.json"
                  }
              ]
          }
@@ -916,7 +904,7 @@
              "options": {
              "commands": [
                  {
-                      "command": "$(npm bin)/cspell 'lib/extensions/**/*.ts'"
+                      "command": "npx cspell 'lib/extensions/**/*.ts'"
                  }
              ]
          }
@@ -1025,6 +1013,67 @@
        }
      }
    },
+    "eslint-angular": {
+      "root": "lib/eslint-angular",
+      "sourceRoot": "lib/eslint-angular/src",
+      "projectType": "library",
+      "prefix": "adf",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/node:webpack",
+          "options": {
+            "projectRoot": "lib/eslint-angular",
+            "outputPath": "dist/libs/eslint-plugin-eslint-angular",
+            "main": "lib/eslint-angular/index.ts",
+            "generatePackageJson" : true,
+            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json"
+          },
+          "configurations": {
+            "production": {
+              "projectRoot": "lib/eslint-angular",
+              "outputPath": "dist/libs/eslint-plugin-eslint-angular",
+              "main": "lib/eslint-angular/index.ts",
+              "generatePackageJson" : true,
+              "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "lib/eslint-angular/**/*.ts"
+            ]
+          }
+        },
+        "bundle": {
+          "executor": "nx:run-commands",
+          "options": {
+            "commands": [
+              {
+                "command": "echo testing bundle created"
+              }
+            ]
+          }
+        },
+        "npm-publish": {
+          "executor": "nx:run-commands",
+          "dependsOn": [
+            "build"
+          ],
+          "options": {
+            "cwd": "dist/libs/eslint-plugin-eslint-angular",
+            "commands": [
+              {
+                "command": "npm publish --tag {args.tag}",
+                "forwardAllArgs": true
+              }
+            ]
+          }
+        }
+      }
+    },
    "cli": {
      "root": "lib/cli",
      "sourceRoot": "lib/cli",
@@ -1113,7 +1162,6 @@
            "configDir": "lib/stories/.storybook",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -1135,7 +1183,6 @@
            "outputDir": "dist/storybook/stories",
            "compodoc": false,
            "styles": [
-              "demo-shell/src/assets/fonts/material-icons/material-icons.css",
              "demo-shell/src/assets/fonts/muli/muli.css",
              "demo-shell/src/styles.scss",
              "demo-shell/src/custom-style-dev.scss",
@@ -5,6 +5,7 @@
    "activiti",
    "adhoc",
    "afts",
+    "appkey",
    "Arial",
    "arrowdown",
    "arrowup",
@@ -1,7 +1,7 @@
 {
  "name": "Alfresco-ADF-Angular-Demo",
  "description": "Demo shell for Alfresco Angular components",
-  "version": "6.0.0",
+  "version": "6.2.0",
  "author": "Hyland Software, Inc. and its affiliates",
  "repository": {
    "type": "git",
@@ -18,7 +18,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -144,7 +143,6 @@ registerLocaleData(localeSv);
        FormsModule,
        HttpClientModule,
        MaterialModule,
-        FlexLayoutModule,
        TranslateModule.forRoot(),
        CoreModule.forRoot(),
        ContentModule.forRoot(),
@@ -18,7 +18,7 @@

                <div class="app-layout-menu-spacer"></div>

-                <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+                <app-search-bar></app-search-bar>

                <div class="app-header-delimiexpandedSidenavter"></div>

@@ -138,7 +138,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
        this.headerService.headerTextColor
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(headerTextColor => {
-                document.documentElement.style.setProperty('--theme-primary-color-default-contrast', headerTextColor);
+                document.documentElement.style.setProperty('--theme-header-text-color', headerTextColor);
            });

        this.headerService.logo
@@ -58,28 +58,25 @@
    </small>

    <adf-toolbar class="app-full-content-toolbar">
-        <adf-toolbar-title fxFlex="0 1 auto">
+        <adf-toolbar-title>
            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
            </adf-breadcrumb>
        </adf-toolbar-title>
-        <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
-        <div fxFlex="0 0 auto">
-            <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.NEW_FOLDER_LABEL' | translate">
-                <mat-icon>create_new_folder</mat-icon>
-            </button>
-            <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.EDIT_NODE_LABEL' | translate">
-                <mat-icon>create</mat-icon>
-            </button>
-            <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.DELETE_NODE_LABEL' | translate">
-                <mat-icon>delete</mat-icon>
-            </button>
-        </div>
+        <adf-toolbar-divider></adf-toolbar-divider>
+        <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.NEW_FOLDER_LABEL' | translate">
+            <mat-icon>create_new_folder</mat-icon>
+        </button>
+        <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.EDIT_NODE_LABEL' | translate">
+            <mat-icon>create</mat-icon>
+        </button>
+        <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.DELETE_NODE_LABEL' | translate">
+            <mat-icon>delete</mat-icon>
+        </button>
    </adf-toolbar>

    <h2>6. Dropdown Breadcrumb</h2>

-    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                             class="app-files-breadcrumb"
+    <adf-dropdown-breadcrumb class="app-files-breadcrumb"
                             [target]="documentList">
    </adf-dropdown-breadcrumb>

@@ -1,13 +1,21 @@
-.app-breadcrumb-container-restricted {
-    width: 800px;
-    max-width: 800px;
-    border: 1px solid lightgray;
-}
+app-breadcrumb-demo {
+    .app-breadcrumb-container-restricted {
+        width: 800px;
+        max-width: 800px;
+        border: 1px solid lightgray;
+    }

-.app-content {
-    margin: 10px 0;
-}
+    .app-content {
+        margin: 10px 0;
+    }

-.app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
-    width: 0;
+    .app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
+        width: 0;
+    }
+
+    @media screen and (min-width: 600px) {
+        .app-files-breadcrumb {
+            display: none;
+        }
+    }
 }
@@ -15,11 +15,13 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';

@Component({
+    selector: 'app-breadcrumb-demo',
    templateUrl: './breadcrumb-demo.component.html',
-    styleUrls: [`./breadcrumb-demo.component.scss`]
+    styleUrls: [`./breadcrumb-demo.component.scss`],
+    encapsulation: ViewEncapsulation.None
 })
 export class BreadcrumbDemoComponent {

@@ -1,8 +1,4 @@
 <adf-toolbar>
-  <div fxLayout="column" fxLayoutAlign="center">
-    <div fxLayout="row">
-      <div class="app-crumb">{{appName + ' >'}} </div>
-      <div class="app-filter-crumb"> {{filterName | translate}}</div>
-    </div>
-  </div>
+  <div class="app-crumb">{{appName + ' >'}} </div>
+  <div class="app-filter-crumb"> {{filterName | translate}}</div>
 </adf-toolbar>
@@ -1,8 +1,14 @@
-.app-app-crumb {
-    opacity: 0.5;
-}
+app-cloud-breadcrumbs {
+    .app-app-crumb {
+        opacity: 0.5;
+    }

-.app-filter-crumb {
-    opacity: 0.8;
-    margin-left: 5px;
+    .app-filter-crumb {
+        opacity: 0.8;
+        margin-left: 5px;
+    }
+
+    adf-toolbar {
+        display: flex;
+    }
 }
@@ -15,13 +15,14 @@
 * limitations under the License.
 */

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-cloud-breadcrumbs',
    templateUrl: './cloud-breadcrumb-component.html',
-    styleUrls: ['./cloud-breadcrumb-component.scss']
+    styleUrls: ['./cloud-breadcrumb-component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CloudBreadcrumbsComponent implements OnInit {
    appName: string;
@@ -1,39 +1,37 @@
-<mat-tab-group fxFill class="app-cloud-layout-tab-body">
+<mat-tab-group class="app-cloud-layout-tab-body">
  <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
-    <div fxFill fxLayout>
-      <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
-        <adf-sidenav-layout-header>
-          <ng-template>
-            <app-cloud-breadcrumbs></app-cloud-breadcrumbs>
-          </ng-template>
-        </adf-sidenav-layout-header>
-        <adf-sidenav-layout-navigation>
-          <ng-template>
-            <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
-              <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-              <div adf-sidebar-menu-options>
-                <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
-                  <mat-icon>assessment</mat-icon>
-                  <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
-                </button>
-              </div>
-              <div adf-sidebar-menu-options>
-                <button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
-                  <mat-icon>assessment</mat-icon>
-                  <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
-                </button>
-              </div>
-            </adf-sidebar-action-menu>
-            <app-cloud-filters-demo [appName]="appName"></app-cloud-filters-demo>
-          </ng-template>
-        </adf-sidenav-layout-navigation>
-        <adf-sidenav-layout-content>
-          <ng-template>
-            <router-outlet></router-outlet>
-          </ng-template>
-        </adf-sidenav-layout-content>
-      </adf-sidenav-layout>
-    </div>
+    <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
+      <adf-sidenav-layout-header>
+        <ng-template>
+          <app-cloud-breadcrumbs></app-cloud-breadcrumbs>
+        </ng-template>
+      </adf-sidenav-layout-header>
+      <adf-sidenav-layout-navigation>
+        <ng-template>
+          <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+            <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+            <div adf-sidebar-menu-options>
+              <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
+                <mat-icon>assessment</mat-icon>
+                <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+              </button>
+            </div>
+            <div adf-sidebar-menu-options>
+              <button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
+                <mat-icon>assessment</mat-icon>
+                <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
+              </button>
+            </div>
+          </adf-sidebar-action-menu>
+          <app-cloud-filters-demo [appName]="appName"></app-cloud-filters-demo>
+        </ng-template>
+      </adf-sidenav-layout-navigation>
+      <adf-sidenav-layout-content>
+        <ng-template>
+          <router-outlet></router-outlet>
+        </ng-template>
+      </adf-sidenav-layout-content>
+    </adf-sidenav-layout>
  </mat-tab>
  <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
      <app-cloud-settings></app-cloud-settings>
@@ -5,3 +5,18 @@
 .app-cloud-layout-tab-body .mat-tab-body-wrapper {
    height: 100%;
 }
+
+app-cloud-layout {
+    .app-cloud-layout-tab-body {
+        height: 100%;
+        min-height: 100%;
+        min-width: 100%;
+        width: 100%;
+
+        adf-sidenav-layout {
+            flex-direction: row;
+            box-sizing: border-box;
+            display: flex;
+        }
+    }
+}
@@ -1,36 +1,34 @@
-<mat-tab-group fxFill class="app-cloud-layout-tab-body">
-    <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
-      <div fxFill fxLayout>
-        <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
-          <adf-sidenav-layout-navigation>
-            <ng-template>
-              <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
-                <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-                <div adf-sidebar-menu-options>
-                  <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
-                    <mat-icon>assessment</mat-icon>
-                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
-                  </button>
-                </div>
-                <div adf-sidebar-menu-options>
-                  <button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
-                    <mat-icon>assessment</mat-icon>
-                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
-                  </button>
-                </div>
-              </adf-sidebar-action-menu>
-              <app-community-cloud-filters-demo></app-community-cloud-filters-demo>
-            </ng-template>
-          </adf-sidenav-layout-navigation>
-          <adf-sidenav-layout-content>
-            <ng-template>
-              <router-outlet></router-outlet>
-            </ng-template>
-          </adf-sidenav-layout-content>
-        </adf-sidenav-layout>
-      </div>
-    </mat-tab>
-    <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
-        <app-cloud-settings></app-cloud-settings>
-    </mat-tab>
-  </mat-tab-group>
+<mat-tab-group class="app-cloud-layout-tab-body">
+  <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
+    <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
+      <adf-sidenav-layout-navigation>
+        <ng-template>
+          <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+            <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+              <div adf-sidebar-menu-options>
+                <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
+                 <mat-icon>assessment</mat-icon>
+                   <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+                </button>
+              </div>
+              <div adf-sidebar-menu-options>
+                <button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
+                  <mat-icon>assessment</mat-icon>
+                  <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
+                </button>
+              </div>
+            </adf-sidebar-action-menu>
+            <app-community-cloud-filters-demo></app-community-cloud-filters-demo>
+          </ng-template>
+        </adf-sidenav-layout-navigation>
+        <adf-sidenav-layout-content>
+          <ng-template>
+            <router-outlet></router-outlet>
+          </ng-template>
+        </adf-sidenav-layout-content>
+    </adf-sidenav-layout>
+  </mat-tab>
+  <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
+    <app-cloud-settings></app-cloud-settings>
+  </mat-tab>
+</mat-tab-group>
@@ -0,0 +1,20 @@
+.app-cloud-layout-overflow {
+    overflow: auto;
+}
+
+.app-cloud-layout-tab-body {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .mat-tab-body-wrapper {
+        height: 100%;
+    }
+
+    adf-sidenav-layout {
+        min-height: 100%;
+        min-width: 100%;
+    }
+}
+
@@ -21,14 +21,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';

@Component({
    templateUrl: './community-cloud.component.html',
-    styles: [`.app-cloud-layout-overflow {
-        overflow: auto;
-      }
-
-      .app-cloud-layout-tab-body .mat-tab-body-wrapper {
-        height: 100% !important;
-      }
-      `],
+    styleUrls: ['./community-cloud.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class CommunityCloudComponent implements OnInit {
@@ -8,11 +8,9 @@
 <div class="app-process-cloud-container">

    <adf-cloud-task-list
-        fxFlex
        class="app-cloud-layout-overflow"
        [processInstanceId]="processInstanceId"
-        (rowClick)="onRowClick($event)"
-        #taskCloud>
+        (rowClick)="onRowClick($event)">
    </adf-cloud-task-list>

    <adf-cloud-process-header
@@ -1,14 +1,17 @@
-.app {
-    &-process-cloud-container {
-        display: flex;
-    }
+app-community-process-details-cloud {
+    .app {
+        &-process-cloud-container {
+            display: flex;
+        }

-    &-cloud-layout-overflow {
-        width: 67%;
-    }
+        &-cloud-layout-overflow {
+            width: 67%;
+            flex: 1;
+        }

-    &-process-cloud-header {
-        margin-left: 10px;
-        width: 25%;
+        &-process-cloud-header {
+            margin-left: 10px;
+            width: 25%;
+        }
    }
 }
@@ -15,12 +15,14 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';

@Component({
+    selector: 'app-community-process-details-cloud',
    templateUrl: './community-process-details-cloud.component.html',
-    styleUrls: ['./community-process-details-cloud.component.scss']
+    styleUrls: ['./community-process-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityProcessDetailsCloudDemoComponent {

@@ -1,42 +1,42 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <adf-cloud-edit-process-filter
-        [id]="filterId"
-        [filterProperties]="processFilterProperties.filterProperties"
-        [sortProperties]="processFilterProperties.sortProperties"
-        [actions]="processFilterProperties.actions"
-        (filterChange)="onFilterChange($event)"
-        (action)="onProcessFilterAction($event)">
-    </adf-cloud-edit-process-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-process-list #processCloud
-            fxFlex
-            class="app-cloud-layout-overflow"
-            [initiator]="editedFilter.initiator"
-            [processDefinitionId]="editedFilter.processDefinitionId"
-            [processDefinitionKey]="editedFilter.processDefinitionKey"
-            [id]="editedFilter.processInstanceId"
-            [status]="editedFilter.status"
-            [name]="editedFilter.processName"
-            [businessKey]="editedFilter['businessKey']"
-            [lastModifiedFrom]="editedFilter.lastModifiedFrom"
-            [lastModifiedTo]="editedFilter.lastModifiedTo"
-            [sorting]="sortArray"
-            [selectionMode]="selectionMode"
-            [multiselect]="multiselect"
-            (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)">
-        </adf-cloud-process-list>
-        <adf-pagination
-            [target]="processCloud"
-            (changePageSize)="onChangePageSize($event)"
-            (nextPage)="resetSelectedRows()"
-            (prevPage)="resetSelectedRows()">
-        </adf-pagination>
-        <div *ngIf="testingMode">
-            Selected rows:
-            <ul>
-                <li *ngFor="let row of selectedRows">{{ row.id }}</li>
-            </ul>
-        </div>
+<adf-cloud-edit-process-filter
+    [id]="filterId"
+    [filterProperties]="processFilterProperties.filterProperties"
+    [sortProperties]="processFilterProperties.sortProperties"
+    [actions]="processFilterProperties.actions"
+    (filterChange)="onFilterChange($event)"
+    (action)="onProcessFilterAction($event)">
+</adf-cloud-edit-process-filter>
+<div
+    class="app-cloud-process-list-container"
+    *ngIf="editedFilter">
+    <adf-cloud-process-list
+        #processCloud
+        class="app-cloud-layout-overflow"
+        [initiator]="editedFilter.initiator"
+        [processDefinitionId]="editedFilter.processDefinitionId"
+        [processDefinitionKey]="editedFilter.processDefinitionKey"
+        [id]="editedFilter.processInstanceId"
+        [status]="editedFilter.status"
+        [name]="editedFilter.processName"
+        [businessKey]="editedFilter['businessKey']"
+        [lastModifiedFrom]="editedFilter.lastModifiedFrom"
+        [lastModifiedTo]="editedFilter.lastModifiedTo"
+        [sorting]="sortArray"
+        [selectionMode]="selectionMode"
+        [multiselect]="multiselect"
+        (rowClick)="onRowClick($event)"
+        (rowsSelected)="onRowsSelected($event)">
+    </adf-cloud-process-list>
+    <adf-pagination
+        [target]="processCloud"
+        (changePageSize)="onChangePageSize($event)"
+        (nextPage)="resetSelectedRows()"
+        (prevPage)="resetSelectedRows()">
+    </adf-pagination>
+    <div *ngIf="testingMode">
+        Selected rows:
+        <ul>
+            <li *ngFor="let row of selectedRows">{{ row.id }}</li>
+        </ul>
    </div>
 </div>
@@ -0,0 +1,21 @@
+app-community-processes-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .app-cloud-process-list-container {
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .app-cloud-process-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .app-cloud-layout-overflow, .app-cloud-process-list-container {
+        flex: 1;
+    }
+}
@@ -15,17 +15,17 @@
 * limitations under the License.
 */

-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
-    ProcessListCloudComponent,
    ProcessFilterCloudModel,
-    ProcessListCloudSortingModel,
+    ProcessFilterCloudService,
    ProcessFiltersCloudComponent,
-    ProcessFilterCloudService
+    ProcessListCloudComponent,
+    ProcessListCloudSortingModel
 } from '@alfresco/adf-process-services-cloud';

 import { ActivatedRoute, Router } from '@angular/router';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -35,7 +35,10 @@ const PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
 const ACTION_SAVE_AS = 'saveAs';

@Component({
-    templateUrl: './community-processes-cloud.component.html'
+    selector: 'app-community-processes-cloud-demo',
+    templateUrl: './community-processes-cloud.component.html',
+    styleUrls: ['./community-processes-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
    @ViewChild('processCloud')
@@ -1,46 +1,46 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <adf-cloud-edit-task-filter
-        [id]="filterId"
-        [filterProperties]="taskFilterProperties.filterProperties"
-        [sortProperties]="taskFilterProperties.sortProperties"
-        [actions]="taskFilterProperties.actions"
-        (action)="onTaskFilterAction($event)"
-        (filterChange)="onFilterChange($event)">
-    </adf-cloud-edit-task-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-task-list #taskCloud
-            fxFlex
-            class="app-cloud-layout-overflow"
-            [processDefinitionId]="editedFilter.processDefinitionId"
-            [processInstanceId]="editedFilter.processInstanceId"
-            [name]="editedFilter.taskName"
-            [id]="editedFilter.taskId"
-            [parentTaskId]="editedFilter.parentTaskId"
-            [priority]="editedFilter.priority"
-            [owner]="editedFilter.owner"
-            [lastModifiedFrom]="editedFilter.lastModifiedFrom"
-            [lastModifiedTo]="editedFilter.lastModifiedTo"
-            [status]="editedFilter.status"
-            [assignee]="editedFilter.assignee"
-            [createdDate]="editedFilter.createdDate"
-            [dueDate]="editedFilter.dueDate"
-            [sorting]="sortArray"
-            [multiselect]="multiselect"
-            [selectionMode]="selectionMode"
-            (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)">
-        </adf-cloud-task-list>
-        <adf-pagination
-            [target]="taskCloud"
-            (changePageSize)="onChangePageSize($event)"
-            (nextPage)="resetSelectedRows()"
-            (prevPage)="resetSelectedRows()">
-        </adf-pagination>
-        <div *ngIf="testingMode">
-            Selected rows:
-            <ul>
-                <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
-            </ul>
-        </div>
+<adf-cloud-edit-task-filter
+    [id]="filterId"
+    [filterProperties]="taskFilterProperties.filterProperties"
+    [sortProperties]="taskFilterProperties.sortProperties"
+    [actions]="taskFilterProperties.actions"
+    (action)="onTaskFilterAction($event)"
+    (filterChange)="onFilterChange($event)">
+</adf-cloud-edit-task-filter>
+<div
+    class="app-cloud-task-list-container"
+    *ngIf="editedFilter">
+    <adf-cloud-task-list
+        #taskCloud
+        class="app-cloud-layout-overflow"
+        [processDefinitionId]="editedFilter.processDefinitionId"
+        [processInstanceId]="editedFilter.processInstanceId"
+        [name]="editedFilter.taskName"
+        [id]="editedFilter.taskId"
+        [parentTaskId]="editedFilter.parentTaskId"
+        [priority]="editedFilter.priority"
+        [owner]="editedFilter.owner"
+        [lastModifiedFrom]="editedFilter.lastModifiedFrom"
+        [lastModifiedTo]="editedFilter.lastModifiedTo"
+        [status]="editedFilter.status"
+        [assignee]="editedFilter.assignee"
+        [createdDate]="editedFilter.createdDate"
+        [dueDate]="editedFilter.dueDate"
+        [sorting]="sortArray"
+        [multiselect]="multiselect"
+        [selectionMode]="selectionMode"
+        (rowClick)="onRowClick($event)"
+        (rowsSelected)="onRowsSelected($event)">
+    </adf-cloud-task-list>
+    <adf-pagination
+        [target]="taskCloud"
+        (changePageSize)="onChangePageSize($event)"
+        (nextPage)="resetSelectedRows()"
+        (prevPage)="resetSelectedRows()">
+    </adf-pagination>
+    <div *ngIf="testingMode">
+        Selected rows:
+        <ul>
+            <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
+        </ul>
    </div>
 </div>
@@ -0,0 +1,27 @@
+app-community-tasks-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .adf-cloud-layout-tab-body {
+        .mat-tab-body-wrapper {
+            height: 100%;
+        }
+    }
+
+    .app-cloud-task-list-container {
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .app-cloud-task-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .app-cloud-layout-overflow, .app-cloud-task-list-container {
+        flex: 1;
+    }
+}
@@ -15,9 +15,14 @@
 * limitations under the License.
 */

-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
-import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel, TaskFilterCloudService } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    TaskFilterCloudModel,
+    TaskFilterCloudService,
+    TaskListCloudComponent,
+    TaskListCloudSortingModel
+} from '@alfresco/adf-process-services-cloud';
+import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
@@ -28,8 +33,10 @@ const ACTION_SAVE_AS = 'saveAs';
 const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';

@Component({
+    selector: 'app-community-tasks-cloud-demo',
    templateUrl: './community-task-cloud.component.html',
-    styles: [`.adf-cloud-layout-tab-body .mat-tab-body-wrapper { height: 100%; }`]
+    styleUrls: ['./community-task-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {
    @ViewChild('taskCloud')
@@ -1,20 +1,16 @@
 <h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }}</h4>

-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <div fxLayout="row" fxFill>
-        <div fxLayout="column" fxFlex="80%">
-            <adf-cloud-task-form
-                [taskId]="taskId"
-                (cancelClick)="goBack()"
-                (taskClaimed)="onClaimTask()"
-                (taskCompleted)="onTaskCompleted()"
-                (taskUnclaimed)="onUnclaimTask()"
-                (formSaved)="onFormSaved()"
-                (error)="onError($event)">
-            </adf-cloud-task-form>
-        </div>
-        <adf-cloud-task-header fxFlex
-            [taskId]="taskId">
-        </adf-cloud-task-header>
+<div class="app-community-task-details-cloud-column">
+    <div class="app-community-task-details-cloud-row">
+        <adf-cloud-task-form
+            [taskId]="taskId"
+            (cancelClick)="goBack()"
+            (taskClaimed)="onClaimTask()"
+            (taskCompleted)="onTaskCompleted()"
+            (taskUnclaimed)="onUnclaimTask()"
+            (formSaved)="onFormSaved()"
+            (error)="onError($event)">
+        </adf-cloud-task-form>
+        <adf-cloud-task-header [taskId]="taskId"></adf-cloud-task-header>
    </div>
 </div>
@@ -1,18 +1,48 @@
-.app {
-    &-task-detail-container {
-        display: flex;
-    }
+app-community-task-details-cloud {
+    .app {
+        &-task-detail-container {
+            display: flex;
+        }

-    &-task-title {
-        margin-left: 15px;
-    }
+        &-task-title {
+            margin-left: 15px;
+        }

-    &-task-control {
-        width: 70%;
-    }
+        &-task-control {
+            width: 70%;
+        }

-    &-demop-card-container {
-        width: 30%;
-        font-family: inherit;
+        &-demop-card-container {
+            width: 30%;
+            font-family: inherit;
+        }
+
+        &-community-task-details-cloud-column {
+            margin: 0;
+            flex-direction: column;
+
+            .app-community-task-details-cloud-row {
+                flex-direction: row;
+
+                adf-cloud-task-form {
+                    flex: 1 1 100%;
+                    flex-direction: column;
+                    display: flex;
+                    max-width: 80%;
+                }
+
+                adf-cloud-task-header {
+                    flex: 1;
+                }
+            }
+        }
+
+        &-community-task-details-cloud-column, &-community-task-details-cloud-row {
+            height: 100%;
+            min-height: 100%;
+            min-width: 100%;
+            width: 100%;
+            display: flex;
+        }
    }
 }
@@ -15,13 +15,15 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';

@Component({
+    selector: 'app-community-task-details-cloud',
    templateUrl: './community-task-details-cloud.component.html',
-    styleUrls: ['./community-task-details-cloud.component.scss']
+    styleUrls: ['./community-task-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityTaskDetailsCloudDemoComponent {

@@ -19,7 +19,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import {
    ProcessServicesCloudModule,
    LocalPreferenceCloudService,
@@ -76,8 +75,7 @@ const routes: Routes = [
        CoreModule,
        ProcessServicesCloudModule,
        RouterModule.forChild(routes),
-        AppCloudSharedModule,
-        FlexLayoutModule
+        AppCloudSharedModule
    ],
    declarations: [
        CommunityCloudComponent,
@@ -7,12 +7,10 @@
 <div class="app-process-cloud-container">

    <adf-cloud-task-list
-        fxFlex
        class="app-cloud-layout-overflow"
        [appName]="appName"
        [processInstanceId]="processInstanceId"
-        (rowClick)="onRowClick($event)"
-        #taskCloud>
+        (rowClick)="onRowClick($event)">
    </adf-cloud-task-list>

    <adf-cloud-process-header
@@ -1,14 +1,17 @@
-.app {
-    &-process-cloud-container {
-        display: flex;
-    }
+app-process-details-cloud-demo {
+    .app {
+        &-process-cloud-container {
+            display: flex;
+        }

-    &-cloud-layout-overflow {
-        width: 67%;
-    }
+        &-cloud-layout-overflow {
+            width: 67%;
+            flex: 1;
+        }

-    &-process-cloud-header {
-        margin-left: 10px;
-        width: 25%;
+        &-process-cloud-header {
+            margin-left: 10px;
+            width: 25%;
+        }
    }
 }
@@ -15,12 +15,14 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';

@Component({
+    selector: 'app-process-details-cloud-demo',
    templateUrl: './process-details-cloud-demo.component.html',
-    styleUrls: ['./process-details-cloud-demo.component.scss']
+    styleUrls: ['./process-details-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ProcessDetailsCloudDemoComponent {

@@ -1,70 +1,70 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <adf-cloud-edit-process-filter
-        [appName]="appName"
-        [id]="filterId"
-        [filterProperties]="filterProperties"
-        [sortProperties]="filterSortProperties"
-        [actions]="filterActions"
-        [processFilter]="editedFilter"
-        (filterChange)="onFilterChange($event)"
-        (action)="onProcessFilterAction($event)">
-    </adf-cloud-edit-process-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-process-list #processCloud
-            fxFlex
-            class="app-cloud-layout-overflow"
-            [appName]="editedFilter.appName"
-            [appVersion]="editedFilter.appVersion"
-            [initiator]="editedFilter.initiator"
-            [processDefinitionId]="editedFilter.processDefinitionId"
-            [processDefinitionName]="editedFilter.processDefinitionName"
-            [processDefinitionKey]="editedFilter.processDefinitionKey"
-            [id]="editedFilter.processInstanceId"
-            [status]="editedFilter.status"
-            [name]="editedFilter.processName"
-            [businessKey]="editedFilter['businessKey']"
-            [lastModifiedFrom]="editedFilter.lastModifiedFrom"
-            [lastModifiedTo]="editedFilter.lastModifiedTo"
-            [sorting]="[{orderBy: editedFilter.sort,  direction: editedFilter.order}]"
-            [selectionMode]="selectionMode"
-            [stickyHeader]="true"
-            [showActions]="actionMenu"
-            [showContextMenu]="contextMenu"
-            [multiselect]="multiselect"
-            (showRowActionsMenu)="onShowRowActionsMenu($event)"
-            (showRowContextMenu)="onShowRowContextMenu($event)"
-            (executeRowAction)="onExecuteRowAction($event)"
-            (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)">
-        </adf-cloud-process-list>
-        <adf-pagination
-            [target]="processCloud"
-            (changePageSize)="onChangePageSize($event)"
-            (nextPage)="resetSelectedRows()"
-            (prevPage)="resetSelectedRows()">
-        </adf-pagination>
-        <div *ngIf="testingMode">
-            <div *ngIf="multiselect">
-                {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
-                <ul>
-                    <li *ngFor="let row of selectedRows">{{ row.id }}</li>
-                </ul>
+<adf-cloud-edit-process-filter
+    [appName]="appName"
+    [id]="filterId"
+    [filterProperties]="filterProperties"
+    [sortProperties]="filterSortProperties"
+    [actions]="filterActions"
+    [processFilter]="editedFilter"
+    (filterChange)="onFilterChange($event)"
+    (action)="onProcessFilterAction($event)">
+</adf-cloud-edit-process-filter>
+<div
+    *ngIf="editedFilter"
+    class="app-processes-list-container">
+    <adf-cloud-process-list
+        #processCloud
+        class="app-cloud-layout-overflow"
+        [appName]="editedFilter.appName"
+        [appVersion]="editedFilter.appVersion"
+        [initiator]="editedFilter.initiator"
+        [processDefinitionId]="editedFilter.processDefinitionId"
+        [processDefinitionName]="editedFilter.processDefinitionName"
+        [processDefinitionKey]="editedFilter.processDefinitionKey"
+        [id]="editedFilter.processInstanceId"
+        [status]="editedFilter.status"
+        [name]="editedFilter.processName"
+        [businessKey]="editedFilter['businessKey']"
+        [lastModifiedFrom]="editedFilter.lastModifiedFrom"
+        [lastModifiedTo]="editedFilter.lastModifiedTo"
+        [sorting]="[{orderBy: editedFilter.sort,  direction: editedFilter.order}]"
+        [selectionMode]="selectionMode"
+        [stickyHeader]="true"
+        [showActions]="actionMenu"
+        [showContextMenu]="contextMenu"
+        [multiselect]="multiselect"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (showRowContextMenu)="onShowRowContextMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
+        (rowClick)="onRowClick($event)"
+        (rowsSelected)="onRowsSelected($event)">
+    </adf-cloud-process-list>
+    <adf-pagination
+        [target]="processCloud"
+        (changePageSize)="onChangePageSize($event)"
+        (nextPage)="resetSelectedRows()"
+        (prevPage)="resetSelectedRows()">
+    </adf-pagination>
+    <div *ngIf="testingMode">
+        <div *ngIf="multiselect">
+            {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
+            <ul>
+                <li *ngFor="let row of selectedRows">{{ row.id }}</li>
+            </ul>
+        </div>
+        <div *ngIf="actionMenu">
+            <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
+            <br>
+            <div *ngIf="selectedAction">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
+                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
            </div>
-            <div *ngIf="actionMenu">
-                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
-                <br>
-                <div *ngIf="selectedAction">
-                    <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
-                    <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
-                </div>
-            </div>
-            <div *ngIf="contextMenu">
-                <span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
-                <br>
-                <div *ngIf="selectedContextAction">
-                    <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
-                    <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
-                </div>
+        </div>
+        <div *ngIf="contextMenu">
+            <span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
+            <br>
+            <div *ngIf="selectedContextAction">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
+                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
            </div>
        </div>
    </div>
@@ -0,0 +1,22 @@
+app-processes-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .app-processes-list-container {
+        box-sizing: border-box;
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .app-processes-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .app-processes-list-container, .app-cloud-layout-overflow {
+        flex: 1;
+    }
+}
@@ -15,10 +15,16 @@
 * limitations under the License.
 */

-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ProcessFilterAction, ProcessFilterCloudModel, PROCESS_FILTER_ACTION_DELETE, PROCESS_FILTER_ACTION_SAVE, PROCESS_FILTER_ACTION_SAVE_AS } from '@alfresco/adf-process-services-cloud';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    PROCESS_FILTER_ACTION_DELETE,
+    PROCESS_FILTER_ACTION_SAVE,
+    PROCESS_FILTER_ACTION_SAVE_AS,
+    ProcessFilterAction,
+    ProcessFilterCloudModel
+} from '@alfresco/adf-process-services-cloud';
 import { ActivatedRoute, Router } from '@angular/router';
-import { UserPreferencesService, DataCellEvent } from '@alfresco/adf-core';
+import { DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -26,7 +32,10 @@ import { Pagination } from '@alfresco/js-api';
 import { CloudProcessFiltersService } from './services/cloud-process-filters.service';

@Component({
-    templateUrl: './processes-cloud-demo.component.html'
+    selector: 'app-processes-cloud-demo',
+    templateUrl: './processes-cloud-demo.component.html',
+    styleUrls: ['./processes-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
    appName: string = '';
@@ -1,42 +1,38 @@
-<div fxLayout
-     fxFill>
-    <adf-cloud-service-task-filters [appName]="appName"
-                                    [filterParam]="{index: 0}"
-                                    (filterClicked)="onTaskFilterSelected($event)"
-                                    (filterSelected)="onTaskFilterSelected($event)">
-
-    </adf-cloud-service-task-filters>
-    <div fxLayout="column"
-         fxFlex>
-        <adf-cloud-edit-service-task-filter [id]="filterId"
-                                            [appName]="appName"
-                                            [filterProperties]="taskFilterProperties.filterProperties"
-                                            [sortProperties]="taskFilterProperties.sortProperties"
-                                            [actions]="taskFilterProperties.actions"
-                                            (filterChange)="onFilterChange($event)">
-        </adf-cloud-edit-service-task-filter>
-        <div fxLayout="column"
-             fxFlex
-             fxFill
-             fxLayoutAlign="space-between"
-             *ngIf="editedFilter">
-            <adf-cloud-service-task-list #taskCloud
-                                         fxFlex
-                                         [queryParams]="editedFilter"
-                                         class="app-cloud-layout-overflow"
-                                         [appName]="editedFilter.appName"
-                                         [sorting]="sortArray"
-                                         [multiselect]="multiselect"
-                                         [selectionMode]="selectionMode"
-                                         [stickyHeader]="true"
-                                         [showActions]="actionMenu"
-                                         [showContextMenu]="contextMenu">
-            </adf-cloud-service-task-list>
-            <adf-pagination [target]="taskCloud"
-                            (changePageSize)="onChangePageSize($event)"
-                            (nextPage)="resetSelectedRows()"
-                            (prevPage)="resetSelectedRows()">
-            </adf-pagination>
-        </div>
+<adf-cloud-service-task-filters
+    [appName]="appName"
+    [filterParam]="{index: 0}"
+    (filterClicked)="onTaskFilterSelected($event)"
+    (filterSelected)="onTaskFilterSelected($event)">
+</adf-cloud-service-task-filters>
+<div class="app-task-list-with-filter">
+    <adf-cloud-edit-service-task-filter
+        [id]="filterId"
+        [appName]="appName"
+        [filterProperties]="taskFilterProperties.filterProperties"
+        [sortProperties]="taskFilterProperties.sortProperties"
+        [actions]="taskFilterProperties.actions"
+        (filterChange)="onFilterChange($event)">
+    </adf-cloud-edit-service-task-filter>
+    <div
+        class="app-task-list-container"
+        *ngIf="editedFilter">
+        <adf-cloud-service-task-list
+            #taskCloud
+            [queryParams]="editedFilter"
+            class="app-cloud-layout-overflow"
+            [appName]="editedFilter.appName"
+            [sorting]="sortArray"
+            [multiselect]="multiselect"
+            [selectionMode]="selectionMode"
+            [stickyHeader]="true"
+            [showActions]="actionMenu"
+            [showContextMenu]="contextMenu">
+        </adf-cloud-service-task-list>
+        <adf-pagination
+            [target]="taskCloud"
+            (changePageSize)="onChangePageSize($event)"
+            (nextPage)="resetSelectedRows()"
+            (prevPage)="resetSelectedRows()">
+        </adf-pagination>
    </div>
 </div>
@@ -0,0 +1,25 @@
+app-service-task-list-cloud-demo {
+    min-height: 100%;
+    min-width: 100%;
+    display: flex;
+
+    .app-task-list-with-filter, .app-task-list-container {
+        flex-direction: column;
+        display: flex;
+        flex: 1;
+    }
+
+    &, .app-task-list-container {
+        height: 100%;
+        width: 100%;
+    }
+
+    .app-task-list-container {
+        place-content: stretch space-between;
+        align-items: stretch;
+
+        .app-cloud-layout-overflow {
+            flex: 1;
+        }
+    }
+}
@@ -15,9 +15,13 @@
 * limitations under the License.
 */

-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { TaskListCloudSortingModel, ServiceTaskListCloudComponent, ServiceTaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService, PaginationModel } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    ServiceTaskFilterCloudModel,
+    ServiceTaskListCloudComponent,
+    TaskListCloudSortingModel
+} from '@alfresco/adf-process-services-cloud';
+import { AppConfigService, PaginationModel, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -25,7 +29,10 @@ import { takeUntil } from 'rxjs/operators';
 const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-service-task-filter';

@Component({
-    templateUrl: './service-task-list-cloud-demo.component.html'
+    selector: 'app-service-task-list-cloud-demo',
+    templateUrl: './service-task-list-cloud-demo.component.html',
+    styleUrls: ['./service-task-list-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy {
    @ViewChild('taskCloud')
@@ -1,71 +1,67 @@
-<div fxFlex fxLayout="column" class="app-settings-container">
-    <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
-        {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
-        {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
-        {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
-        {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
-        {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
-        {{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }}
-    </mat-slide-toggle>
-    <mat-form-field data-automation-id="selectionMode">
-        <mat-label>
-            {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
-        </mat-label>
-        <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
-            <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
-                {{ option.title }}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-card *ngIf="actionMenu || contextMenu">
-        <mat-card-header>
-          <mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-            <form [formGroup]="actionMenuForm" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
-                <mat-form-field fxFlex="23%">
-                    <input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
-                </mat-form-field>
-
-                <mat-form-field fxFlex="23%">
-                    <input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
-                </mat-form-field>
-
-                <mat-form-field fxFlex="23%">
-                    <input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}"I>
-                </mat-form-field>
-                <mat-checkbox formControlName="visible">
-                    {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
-                </mat-checkbox>
-                <mat-checkbox formControlName="disabled">
-                    {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
-                </mat-checkbox>
-                <button mat-raised-button (click)="addAction()">
-                        {{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
-                </button>
-            </form>
-            <div *ngIf="actions.length > 0">
-                <mat-chip-list #chipList>
-                    <mat-chip *ngFor="let action of actions" [removable]="true">
-                        {{action.title}}
-                        <mat-icon
-                            matChipRemove
-                            (click)="removeAction(action)">
-                            cancel
-                        </mat-icon>
-                    </mat-chip>
-                </mat-chip-list>
-            </div>
-        </mat-card-content>
-    </mat-card>
-</div>
+<mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
+    {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
+</mat-slide-toggle>
+<mat-slide-toggle [color]="'primary'" [checked]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
+    {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
+</mat-slide-toggle>
+<mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
+    {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}
+</mat-slide-toggle>
+<mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
+    {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
+</mat-slide-toggle>
+<mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
+    {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
+</mat-slide-toggle>
+<mat-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
+    {{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }}
+</mat-slide-toggle>
+<mat-form-field data-automation-id="selectionMode">
+    <mat-label>
+        {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
+    </mat-label>
+    <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
+        <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
+            {{ option.title }}
+        </mat-option>
+    </mat-select>
+</mat-form-field>
+<mat-card *ngIf="actionMenu || contextMenu">
+    <mat-card-header>
+      <mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
+            <mat-form-field>
+                <input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}">
+            </mat-form-field>
+            <mat-checkbox formControlName="visible">
+                {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
+            </mat-checkbox>
+            <mat-checkbox formControlName="disabled">
+                {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
+            </mat-checkbox>
+            <button mat-raised-button (click)="addAction()">
+                    {{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
+            </button>
+        </form>
+        <div *ngIf="actions.length > 0">
+            <mat-chip-list>
+                <mat-chip *ngFor="let action of actions" [removable]="true">
+                    {{action.title}}
+                    <mat-icon
+                        matChipRemove
+                        (click)="removeAction(action)">
+                        cancel
+                    </mat-icon>
+                </mat-chip>
+            </mat-chip-list>
+        </div>
+    </mat-card-content>
+</mat-card>
@@ -1,7 +1,25 @@
-.app-settings-container {
+app-cloud-settings {
    padding: 20px 30px;
-}
+    flex-direction: column;
+    display: flex;
+    flex: 1;

-.app-settings-container mat-form-field {
-    max-width: 200px;
+    mat-form-field {
+        max-width: 200px;
+    }
+
+    .app-cloud-settings-form {
+        display: flex;
+        place-content: center space-around;
+        align-items: center;
+
+        mat-form-field {
+            flex: 1 1 100%;
+            max-width: 23%;
+        }
+
+        mat-form-field, mat-checkbox {
+            margin-right: 20px;
+        }
+    }
 }
@@ -15,16 +15,17 @@
 * limitations under the License.
 */

-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CloudLayoutService, ActionMenuModel } from '../services/cloud-layout.service';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActionMenuModel, CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';

@Component({
    selector: 'app-cloud-settings',
    templateUrl: './cloud-settings.component.html',
-    styleUrls: ['./cloud-settings.component.scss']
+    styleUrls: ['./cloud-settings.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CloudSettingsComponent implements OnInit, OnDestroy {
    private onDestroy$ = new Subject<boolean>();
@@ -23,7 +23,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CoreModule } from '@alfresco/adf-core';
-import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
    imports: [
@@ -32,8 +31,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
        MatDialogModule,
        MatInputModule,
        MatSelectModule,
-        MatSlideToggleModule,
-        FlexLayoutModule
+        MatSlideToggleModule
    ],
    declarations: [ CloudSettingsComponent ],
    exports: [ CommonModule, CloudSettingsComponent]
@@ -1,19 +1,18 @@
 <h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>

-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <div fxLayout="row" fxFill>
-        <div fxLayout="column" fxFlex="80%">
-            <adf-cloud-task-form
-                [appName]="appName"
-                [taskId]="taskId"
-                (cancelClick)="goBack()"
-                (taskCompleted)="onTaskCompleted()"
-                (formContentClicked)="onFormContentClicked($event)"
-                (formSaved)="onFormSaved()"
-                (error)="onError($event)">
-            </adf-cloud-task-form>
-        </div>
-        <adf-cloud-task-header #taskHeader fxFlex
+<div class="app-task-details-cloud-column">
+    <div class="app-task-details-cloud-row">
+        <adf-cloud-task-form
+            [appName]="appName"
+            [taskId]="taskId"
+            (cancelClick)="goBack()"
+            (taskCompleted)="onTaskCompleted()"
+            (formContentClicked)="onFormContentClicked($event)"
+            (formSaved)="onFormSaved()"
+            (error)="onError($event)">
+        </adf-cloud-task-form>
+        <adf-cloud-task-header
+            #taskHeader
            [appName]="appName"
            [taskId]="taskId">
        </adf-cloud-task-header>
@@ -1,18 +1,48 @@
-.app {
-    &-task-detail-container {
-        display: flex;
-    }
+app-task-details-cloud-demo {
+    .app {
+        &-task-detail-container {
+            display: flex;
+        }

-    &-task-title {
-        margin-left: 15px;
-    }
+        &-task-title {
+            margin-left: 15px;
+        }

-    &-task-control {
-        width: 70%;
-    }
+        &-task-control {
+            width: 70%;
+        }

-    &-demop-card-container {
-        width: 30%;
-        font-family: inherit;
+        &-demop-card-container {
+            width: 30%;
+            font-family: inherit;
+        }
+
+        &-task-details-cloud-column {
+            margin: 0;
+            flex-direction: column;
+
+            .app-task-details-cloud-row {
+                flex-direction: row;
+
+                adf-cloud-task-form {
+                    flex: 1 1 100%;
+                    flex-direction: column;
+                    display: flex;
+                    max-width: 80%;
+                }
+
+                adf-cloud-task-header {
+                    flex: 1;
+                }
+            }
+        }
+
+        &-task-details-cloud-column, &-task-details-cloud-row {
+            height: 100%;
+            min-height: 100%;
+            min-width: 100%;
+            width: 100%;
+            display: flex;
+        }
    }
 }
@@ -15,15 +15,17 @@
 * limitations under the License.
 */

-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
 import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
 import { PreviewService } from '../../services/preview.service';

@Component({
+    selector: 'app-task-details-cloud-demo',
    templateUrl: './task-details-cloud-demo.component.html',
-    styleUrls: ['./task-details-cloud-demo.component.scss']
+    styleUrls: ['./task-details-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TaskDetailsCloudDemoComponent {

@@ -1,72 +1,70 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <adf-cloud-edit-task-filter
-        [appName]="appName"
-        [id]="filterId"
-        [filterProperties]="taskFilterProperties.filterProperties"
-        [sortProperties]="taskFilterProperties.sortProperties"
-        [actions]="taskFilterProperties.actions"
-        (action)="onTaskFilterAction($event)"
-        (filterChange)="onFilterChange($event)">
-    </adf-cloud-edit-task-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-task-list #taskCloud
-            fxFlex
-            class="app-cloud-layout-overflow"
-            [appName]="editedFilter.appName"
-            [processDefinitionId]="editedFilter.processDefinitionId"
-            [processInstanceId]="editedFilter.processInstanceId"
-            [name]="editedFilter.taskName"
-            [id]="editedFilter.taskId"
-            [parentTaskId]="editedFilter.parentTaskId"
-            [priority]="editedFilter.priority"
-            [owner]="editedFilter.owner"
-            [lastModifiedFrom]="editedFilter.lastModifiedFrom"
-            [lastModifiedTo]="editedFilter.lastModifiedTo"
-            [status]="editedFilter.status"
-            [assignee]="editedFilter.assignee"
-            [createdDate]="editedFilter.createdDate"
-            [dueDate]="editedFilter.dueDate"
-            [sorting]="sortArray"
-            [standalone]="editedFilter.standalone"
-            [multiselect]="multiselect"
-            [selectionMode]="selectionMode"
-            [stickyHeader]="true"
-            [showActions]="actionMenu"
-            [showContextMenu]="contextMenu"
-            (showRowActionsMenu)="onShowRowActionsMenu($event)"
-            (showRowContextMenu)="onShowRowContextMenu($event)"
-            (executeRowAction)="onExecuteRowAction($event)"
-            (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)">
-        </adf-cloud-task-list>
-        <adf-pagination
-            [target]="taskCloud"
-            (changePageSize)="onChangePageSize($event)"
-            (nextPage)="resetSelectedRows()"
-            (prevPage)="resetSelectedRows()">
-        </adf-pagination>
-        <div *ngIf="testingMode">
-            <div *ngIf="multiselect">
-                {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
-                <ul>
-                    <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
-                </ul>
+<adf-cloud-edit-task-filter
+    [appName]="appName"
+    [id]="filterId"
+    [filterProperties]="taskFilterProperties.filterProperties"
+    [sortProperties]="taskFilterProperties.sortProperties"
+    [actions]="taskFilterProperties.actions"
+    (action)="onTaskFilterAction($event)"
+    (filterChange)="onFilterChange($event)">
+</adf-cloud-edit-task-filter>
+<div class="adf-cloud-task-list-container" *ngIf="editedFilter">
+    <adf-cloud-task-list
+        #taskCloud
+        class="app-cloud-layout-overflow"
+        [appName]="editedFilter.appName"
+        [processDefinitionId]="editedFilter.processDefinitionId"
+        [processInstanceId]="editedFilter.processInstanceId"
+        [name]="editedFilter.taskName"
+        [id]="editedFilter.taskId"
+        [parentTaskId]="editedFilter.parentTaskId"
+        [priority]="editedFilter.priority"
+        [owner]="editedFilter.owner"
+        [lastModifiedFrom]="editedFilter.lastModifiedFrom"
+        [lastModifiedTo]="editedFilter.lastModifiedTo"
+        [status]="editedFilter.status"
+        [assignee]="editedFilter.assignee"
+        [createdDate]="editedFilter.createdDate"
+        [dueDate]="editedFilter.dueDate"
+        [sorting]="sortArray"
+        [standalone]="editedFilter.standalone"
+        [multiselect]="multiselect"
+        [selectionMode]="selectionMode"
+        [stickyHeader]="true"
+        [showActions]="actionMenu"
+        [showContextMenu]="contextMenu"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (showRowContextMenu)="onShowRowContextMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
+        (rowClick)="onRowClick($event)"
+        (rowsSelected)="onRowsSelected($event)">
+    </adf-cloud-task-list>
+    <adf-pagination
+        [target]="taskCloud"
+        (changePageSize)="onChangePageSize($event)"
+        (nextPage)="resetSelectedRows()"
+        (prevPage)="resetSelectedRows()">
+    </adf-pagination>
+    <div *ngIf="testingMode">
+        <div *ngIf="multiselect">
+            {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
+            <ul>
+                <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
+            </ul>
+        </div>
+        <div *ngIf="actionMenu">
+            <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
+            <br>
+            <div *ngIf="selectedAction">
+                <span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
+                <span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
            </div>
-            <div *ngIf="actionMenu">
-                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
-                <br>
-                <div *ngIf="selectedAction">
-                    <span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
-                    <span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
-                </div>
-            </div>
-            <div *ngIf="contextMenu">
-                <span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
-                <br>
-                <div *ngIf="selectedContextAction">
-                    <span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
-                    <span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
-                </div>
+        </div>
+        <div *ngIf="contextMenu">
+            <span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
+            <br>
+            <div *ngIf="selectedContextAction">
+                <span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
+                <span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
            </div>
        </div>
    </div>
@@ -0,0 +1,22 @@
+app-tasks-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .adf-cloud-task-list-container {
+        box-sizing: border-box;
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .adf-cloud-task-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .adf-cloud-task-list-container, .app-cloud-layout-overflow {
+        flex: 1;
+    }
+}
@@ -15,9 +15,13 @@
 * limitations under the License.
 */

-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
-import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    TaskFilterCloudModel,
+    TaskListCloudComponent,
+    TaskListCloudSortingModel
+} from '@alfresco/adf-process-services-cloud';
+import { AppConfigService, DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
@@ -28,7 +32,10 @@ const ACTION_DELETE = 'delete';
 const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';

@Component({
-    templateUrl: './tasks-cloud-demo.component.html'
+    selector: 'app-tasks-cloud-demo',
+    templateUrl: './tasks-cloud-demo.component.html',
+    styleUrls: ['./tasks-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TasksCloudDemoComponent implements OnInit, OnDestroy {
    @ViewChild('taskCloud')
@@ -8,7 +8,7 @@
            </mat-select>
        </mat-form-field>
    </adf-toolbar-title>
-    <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+    <adf-toolbar-divider></adf-toolbar-divider>
    <button mat-icon-button
            [disabled]="!hasSelection(customSourcesDocumentList.selection)"
            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
@@ -15,12 +15,13 @@
 * limitations under the License.
 */

-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import { DocumentListComponent } from '@alfresco/adf-content-services';

@Component({
    selector: 'app-custom-sources',
-    templateUrl: './custom-sources.component.html'
+    templateUrl: './custom-sources.component.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class CustomSourcesComponent {

@@ -33,9 +33,10 @@
        </adf-sites-dropdown>
    </div>

-    <div id="document-list-container" class="app-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
-         fxLayoutGap="16px">
-        <adf-upload-drag-area fxFlex="1 1 auto"
+    <div
+        id="document-list-container"
+        class="app-document-list-container">
+        <adf-upload-drag-area
                              [disabled]="disableDragArea"
                              [acceptedFilesType]="getFileFiltering()"
                              [rootFolderId]="currentFolderId"
@@ -51,21 +52,21 @@
                <span class="app-error-message--text">{{errorMessage}}</span>
            </div>
            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
-                <adf-toolbar-title  fxFlex="0 1 auto">
-                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
+                <adf-toolbar-title>
+                    <adf-breadcrumb
                                    class="app-files-breadcrumb"
                                    root="APP.PERSONAL-FILES"
                                    [target]="documentList">
                    </adf-breadcrumb>
-                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                    <adf-dropdown-breadcrumb
                                             class="app-files-breadcrumb"
                                             [target]="documentList">
                    </adf-dropdown-breadcrumb>
                </adf-toolbar-title>

-                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+                <adf-toolbar-divider></adf-toolbar-divider>

-                <div fxFlex="0 0 auto" class="app-document-action-buttons" fxShow fxHide.lt-sm="true">
+                <div class="app-document-action-buttons">
                    <button
                        mat-icon-button
                        data-automation-id="document-list-grid-view"
@@ -150,7 +151,7 @@
                    </button>
                </div>

-                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker"
+                <button mat-icon-button [matMenuTriggerFor]="themePicker"
                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.THEME' | translate }}">
                    <mat-icon>format_color_fill</mat-icon>
                </button>
@@ -171,9 +172,9 @@
                    </mat-icon>
                </button>

-                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
+                <adf-toolbar-divider class="app-toolbar-divider-before-more-menu"></adf-toolbar-divider>

-                <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
+                <button class="app-toolbar-more-menu-button" mat-icon-button [matMenuTriggerFor]="menu">
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
@@ -212,7 +213,7 @@
                </mat-menu>
            </adf-toolbar>

-            <div class="app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
+            <div class="app-document-list-container-in-upload-drag-area app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
                <adf-document-list
                #documentList
                class="app-file-list-container"
@@ -464,7 +465,7 @@
            </adf-infinite-pagination>
        </adf-upload-drag-area>

-        <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar" fxFlex="0 0 auto">
+        <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
            <div info-drawer-content>

                <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
@@ -26,6 +26,37 @@
    .app-datatable-list {
        min-height: 400px;
    }
+
+    adf-upload-drag-area {
+        margin-right: 16px;
+
+        adf-toolbar-title {
+            flex: 0 1 auto;
+        }
+
+        .app-document-action-buttons {
+            flex: 0 0 auto;
+        }
+
+        @media screen and (max-width: 600px) {
+            adf-breadcrumb, .app-document-action-buttons {
+                display: none;
+            }
+        }
+
+        @media screen and (min-width: 600px) {
+            adf-dropdown-breadcrumb, .app-toolbar-divider-before-more-menu, .app-toolbar-more-menu-button {
+                display: none;
+            }
+        }
+    }
+
+    &:not(.app-document-list-container-in-upload-drag-area) {
+        display: flex;
+        place-content: stretch flex-start;
+        align-items: stretch;
+        max-height: 100%;
+    }
 }

 .adf-datatable-card .app-lock-button {
@@ -45,10 +76,10 @@
 }

 .app-manage-versions-sidebar {
-    width: 360px !important;
+    flex: 0 0 auto;

-    & .app-info-drawer-layout-header {
-        display: none !important;
+    &.adf-info-drawer-layout {
+        width: 360px;
    }
 }

@@ -3,6 +3,6 @@
    <adf-content-metadata-card [node]="contentEntry"
                               [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
 </section>
-<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<footer mat-dialog-actions class="adf-metadata-dialog-actions">
    <button mat-button (click)="close()">{{'METADATA.DIALOG.CLOSE' | translate}}</button>
 </footer>
@@ -0,0 +1,6 @@
+.adf-metadata-dialog-actions {
+    display: flex;
+    max-height: 100%;
+    place-content: center flex-end;
+    align-items: center;
+}
@@ -40,6 +40,6 @@
    <adf-version-list [node]="contentEntry" [showActions]="false"></adf-version-list>
 </section>

-<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<footer mat-dialog-actions class="adf-version-manager-dialog-actions">
    <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
 </footer>
@@ -0,0 +1,6 @@
+.adf-version-manager-dialog-actions {
+    display: flex;
+    max-height: 100%;
+    place-content: center flex-end;
+    align-items: center;
+}
@@ -1,3 +1,9 @@
-adf-create-process-attachment ::ng-deep button {
+app-process-attachments adf-create-process-attachment button {
    float: right;
 }
+
+@media screen and (max-width: 960px) {
+    app-process-attachments .app-empty-list-drag_drop, app-process-attachments .app-empty-list__any-files-here-to-add {
+        display: none;
+    }
+}
@@ -11,18 +11,17 @@
                [processInstanceId]="processInstanceId"
                (attachmentClick)="onAttachmentClick($event)">
                    <adf-empty-list>
-                      <div adf-empty-list-header class="app-empty-list-header">
-                          {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
-                       </div>
-                            <div adf-empty-list-body *ngIf="!isCompletedProcess()">
-                            <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
-                              {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
-                            </div>
-                                  <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
+                        <div adf-empty-list-header class="app-empty-list-header">
+                            {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
+                        </div>
+                        <div adf-empty-list-body *ngIf="!isCompletedProcess()">
+                        <div class="app-empty-list-drag_drop">
+                            {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
+                        </div>
+                              <div class="app-empty-list__any-files-here-to-add">
                                  {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
-                                  </div>
-                            </div>
-
+                              </div>
+                        </div>
                    </adf-empty-list>
            </adf-process-attachment-list>

@@ -15,11 +15,15 @@
 * limitations under the License.
 */

-import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
-import { ProcessInstance, ProcessService ,
-    ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/adf-process-services';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    ProcessAttachmentListComponent,
+    ProcessInstance,
+    ProcessService,
+    ProcessUploadService
+} from '@alfresco/adf-process-services';
 import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
-import { UploadService, DiscoveryApiService } from '@alfresco/adf-content-services';
+import { DiscoveryApiService, UploadService } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -38,7 +42,8 @@ export function processUploadServiceFactory(api: AlfrescoApiService, config: App
            useFactory: (processUploadServiceFactory),
            deps: [AlfrescoApiService, AppConfigService, DiscoveryApiService]
        }
-    ]
+    ],
+    encapsulation: ViewEncapsulation.None
 })

 export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy {
@@ -2,8 +2,8 @@
               data-automation-id="navigation-bar">
    <mat-tab id="app-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
        <div class="app-page-content" *ngIf="showTaskTab">
-            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="app-grid-item app-tasks-menu" fxFlex.gt-md="265px">
+            <div class="app-grid">
+                <div class="app-grid-item app-tasks-menu">
                    <div class="app-list-buttons">
                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -36,9 +36,9 @@
                        </mat-expansion-panel>
                    </mat-accordion>
                </div>
-                <div class="app-grid-item app-tasks-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'adf-small-pagination': true}"
-                     *ngIf="taskFilter && !isStartTaskMode()">
+                <div
+                    class="app-grid-item app-tasks-list"
+                    *ngIf="taskFilter && !isStartTaskMode()">
                    <adf-tasklist
                        [appId]="taskFilter?.appId"
                        [presetColumn]="presetColumn"
@@ -74,8 +74,10 @@
                        #taskListPagination>
                    </adf-pagination>
                </div>
-                <div class="app-grid-item app-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
-                     data-automation-id="app-tasks-details">
+                <div
+                    class="app-grid-item app-tasks-details"
+                    *ngIf="!isStartTaskMode()"
+                    data-automation-id="app-tasks-details">
                    <adf-task-details #activitiDetails
                                      [debugMode]="true"
                                      [taskId]="currentTaskId"
@@ -106,7 +108,9 @@
                        </mat-card-content>
                    </mat-card>
                </div>
-                <div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                <div
+                    class="app-grid-item app-tasks-start"
+                    *ngIf="isStartTaskMode()">
                    <adf-start-task
                        [appId]="appId"
                        [name]="defaultTaskName"
@@ -120,8 +124,10 @@
    <mat-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
        <div class="app-page-content" *ngIf="showProcessTab">
-            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div id="app-processes-menu"  class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
+            <div class="app-grid">
+                <div
+                    id="app-processes-menu"
+                    class="app-grid-item app-processes-menu">
                    <div class="app-list-buttons">
                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -157,9 +163,9 @@
                        </mat-expansion-panel>
                    </mat-accordion>
                </div>
-                <div class="app-grid-item app-processes-list app-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'adf-small-pagination': true}"
-                     *ngIf="processFilter && !isStartProcessMode()">
+                <div
+                    class="app-grid-item app-processes-list app-list"
+                    *ngIf="processFilter && !isStartProcessMode()">
                    <adf-process-instance-list
                        #processList
                        *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
@@ -190,7 +196,9 @@
                        #processListPagination>
                    </adf-pagination>
                </div>
-                <div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                <div
+                    class="app-grid-item app-processes-details"
+                    *ngIf="!isStartProcessMode()">
                    <adf-process-instance-details
                        #activitiProcessDetails
                        [processInstanceId]="currentProcessInstanceId"
@@ -218,8 +226,9 @@
                        </mat-card-content>
                    </mat-card>
                </div>
-                <div class="app-grid-item app-processes-start" fxFlex.gt-md="1 1 auto"
-                     *ngIf="isStartProcessMode()">
+                <div
+                    class="app-grid-item app-processes-start"
+                    *ngIf="isStartProcessMode()">
                    <adf-start-process
                        #activitiStartProcess
                        [appId]="applicationId"
@@ -238,18 +247,12 @@
    </mat-tab>
    <mat-tab id="report-header" href="#report"
             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
+        <div class="app-grid">
+            <div class="app-grid-item app-reports-menu">
                <span><h5>Report List</h5></span>
                <mat-divider></mat-divider>
-                <!-- <adf-analytics-report-list
-                    [appId]="appId"
-                    [selectFirst]="selectFirstReport"
-                    (reportClick)="onReportClick($event)"
-                    #analyticsReportList>
-                </adf-analytics-report-list> -->
            </div>
-            <div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-reports-details">
                <adf-analytics
                    *ngIf="report"
                    [appId]="appId"
@@ -267,11 +270,11 @@
    </mat-tab>
    <mat-tab id="settings-header" href="#settings"
             label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
-        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="app-grid-item app-settings-menu" fxFlex.gt-md="300px">
+        <div class="app-grid">
+            <div class="app-grid-item app-settings-menu">
                <span><h3>Settings Menu</h3></span>
            </div>
-            <div class="app-grid-item app-settings-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-settings-details">
                <div>
                    <mat-slide-toggle id="adf-show-task-filter-icon" [(ngModel)]="showTaskFilterIcon">Show task filters icons
                    </mat-slide-toggle>
@@ -304,7 +307,7 @@
                        <mat-card-header >
                          <mat-card-title>Filter Process definitions</mat-card-title>
                        </mat-card-header>
-                        <mat-card-content  fxLayout="column" fxLayoutAlign="space-around stretch">
+                        <mat-card-content class="app-filter-process-definitions-inputs">
                            <mat-form-field>
                                <mat-label>ApplicationId</mat-label>
                                <input matInput [(ngModel)]="applicationId">
@@ -5,13 +5,28 @@
 }

 .app-grid {
+    flex-direction: row;
+    display: flex;
+    max-height: 100%;
+    place-content: stretch flex-start;
+    align-items: stretch;
+
    .app-grid-item {
+        flex: 1;
        margin: 4px;
        box-shadow:
            0 2px 2px 0 rgba(0, 0, 0, 0.14),
            0 3px 1px -2px rgba(0, 0, 0, 0.2),
            0 1px 5px 0 rgba(0, 0, 0, 0.12);
        padding: 10px;
+
+        .app-filter-process-definitions-inputs {
+            flex-direction: column;
+            display: flex;
+            max-width: 100%;
+            place-content: stretch space-around;
+            align-items: stretch;
+        }
    }

    .app-list-buttons {
@@ -70,6 +85,37 @@
        margin: 10px;
    }

+    @media screen and (min-width: 1280px) {
+        .app-tasks-menu {
+            flex: 1 1 265px;
+            max-width: 265px;
+            min-width: 265px;
+        }
+
+        .app-tasks-list, .app-processes-list {
+            flex: 1 1 380px;
+            max-width: 380px;
+            min-width: 380px;
+        }
+
+        .app-processes-menu {
+            flex: 1 1 225px;
+            max-width: 225px;
+            min-width: 225px;
+        }
+
+        .app-reports-menu, .app-settings-menu {
+            flex: 1 1 300px;
+            max-width: 300px;
+            min-width: 300px;
+        }
+
+        .app-tasks-details, .app-tasks-start, .app-processes-details, .app-processes-start, .app-reports-details, .app-settings-details {
+            flex: 1 1 auto;
+            min-width: auto;
+        }
+    }
+
    @media screen and (max-width: 959px) {
        container-widget .app-grid-list {
            flex-direction: column;
@@ -77,6 +123,14 @@
    }
 }

+@media screen and (max-width: 1279px) {
+    .app-grid {
+        flex-direction: column;
+        max-width: 100%;
+        max-height: initial;
+    }
+}
+
 .app-accordion-panel {
    .mat-expansion-panel {
        background: inherit;
@@ -1,3 +1,9 @@
-adf-create-task-attachment ::ng-deep button {
+app-task-attachments adf-create-task-attachment button {
    float: right;
 }
+
+@media screen and (max-width: 960px) {
+    app-task-attachments .app-empty-list-drag_drop, app-task-attachments .app-empty-list__any-files-here-to-add {
+        display: none;
+    }
+}
@@ -13,10 +13,10 @@
                    <div adf-empty-list-header class="app-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
                    </div>
                    <div adf-empty-list-body  *ngIf="!isCompletedTask()">
-                        <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
+                        <div class="app-empty-list-drag_drop">
                            {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                        </div>
-                        <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
+                        <div class="app-empty-list__any-files-here-to-add">
                            {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                        </div>
                    </div>
@@ -15,15 +15,15 @@
 * limitations under the License.
 */

-import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
-    TaskListService,
    TaskAttachmentListComponent,
-    TaskUploadService,
-    TaskDetailsModel
+    TaskDetailsModel,
+    TaskListService,
+    TaskUploadService
 } from '@alfresco/adf-process-services';
 import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
-import { UploadService, DiscoveryApiService } from '@alfresco/adf-content-services';
+import { DiscoveryApiService, UploadService } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -36,6 +36,7 @@ export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppCon
    selector: 'app-task-attachments',
    templateUrl: './task-attachments.component.html',
    styleUrls: ['./task-attachments.component.css'],
+    encapsulation: ViewEncapsulation.None,
    providers: [
        {
            provide: UploadService,
@@ -1,12 +1,10 @@
-<div class="app-rich-text-editor-container" fxLayout="row wrap" fxLayoutAlign="center start">
-
-    <div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-sx">
+<div class="app-rich-text-editor-container" >
+    <div class="app-rich-text-editor-col app-rich-text-editor-col-sx">
        <h1 class="app-rich-text-editor-col-title">Rich Text Editor</h1>
        <adf-cloud-rich-text-editor [data]="sampleData" #textEditor></adf-cloud-rich-text-editor>
    </div>
-    <div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-rx">
+    <div class="app-rich-text-editor-col app-rich-text-editor-col-rx">
        <h1 class="app-rich-text-editor-col-title">Output Data</h1>
        <pre class="app-rich-text-editor-output">{{editorOutputData | json}}</pre>
    </div>
-
 </div>
@@ -1,19 +1,26 @@
-.app-rich-text-editor-container {
-    .app-rich-text-editor-col {
-        padding: 20px;
+app-rich-text-editor {
+    .app-rich-text-editor-container {
+        display: flex;

-        &-rx {
-            border-left: 1px dashed var(--theme-primary-color);
-            border-spacing: 5px;
+        .app-rich-text-editor-col {
+            padding: 20px;
+            flex: 1 1 50%;
+            max-width: 50%;
+            box-sizing: border-box;
+
+            &-rx {
+                border-left: 1px dashed var(--theme-primary-color);
+                border-spacing: 5px;
+            }
+
+            &-title {
+                text-align: center;
+            }
        }

-        &-title {
-            text-align: center;
+        .app-rich-text-editor-output {
+            max-width: 30vw;
+            overflow-x: scroll;
        }
    }
-
-    .app-rich-text-editor-output {
-        max-width: 30vw;
-        overflow-x: scroll;
-    }
 }
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
 import { OutputData } from '@editorjs/editorjs';
 import { RichTextEditorComponent as AdfRichTextEditorComponent } from '@alfresco/adf-process-services-cloud';
 import { takeUntil } from 'rxjs/operators';
@@ -24,7 +24,8 @@ import { Subject } from 'rxjs';
@Component({
    selector: 'app-rich-text-editor',
    templateUrl: './rich-text-editor.component.html',
-    styleUrls: ['./rich-text-editor.component.scss']
+    styleUrls: ['./rich-text-editor.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class RichTextEditorComponent implements AfterViewInit, OnDestroy {

@@ -22,7 +22,6 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { RichTextEditorModule } from '@alfresco/adf-process-services-cloud';
 import { CoreModule } from '@alfresco/adf-core';
 import { RouterModule, Routes } from '@angular/router';
-import { FlexLayoutModule } from '@angular/flex-layout';

 const routes: Routes = [
    {
@@ -38,7 +37,6 @@ const routes: Routes = [
        CoreModule,
        RouterModule.forChild(routes),
        ContentModule.forChild(),
-        FlexLayoutModule,
        RichTextEditorModule
    ]
 })
@@ -17,7 +17,7 @@

 import { Component, EventEmitter, Output, ViewEncapsulation, OnInit, Input } from '@angular/core';
 import { Validators, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
-import { AppConfigService, AppConfigValues, StorageService, AlfrescoApiService, OauthConfigModel, AuthenticationService } from '@alfresco/adf-core';
+import { AppConfigService, AppConfigValues, StorageService, AlfrescoApiService, AuthenticationService } from '@alfresco/adf-core';
 import { ENTER } from '@angular/cdk/keycodes';

 export const HOST_REGEX = '^(http|https):\/\/.*[^/]$';
@@ -137,7 +137,7 @@ export class HostSettingsComponent implements OnInit {
    }

    private createOAuthFormGroup(): UntypedFormGroup {
-        const oauth = this.appConfig.get<OauthConfigModel>(AppConfigValues.OAUTHCONFIG, {} as any);
+        const oauth = this.appConfig.oauth2;

        return this.formBuilder.group({
            host: [oauth.host, [Validators.required, Validators.pattern(HOST_REGEX)]],
@@ -1,21 +1,17 @@
 <label for="nodeId"><b>Insert Node Id</b></label><br>
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>

-<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
-            <div class="app-social-title">
-                {{'SOCIAL.LIKE' | translate }}
-            </div>
-            <adf-like [nodeId]="nodeId"></adf-like>
-        </mat-card>
-    </div>
-    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
-            <div class="app-social-title">
-                {{'SOCIAL.RATING' | translate }}
-            </div>
-            <adf-rating [nodeId]="nodeId"></adf-rating>
-        </mat-card>
-    </div>
+<div class="app-social-example-areas">
+    <mat-card class="app-social-example-area">
+        <div class="app-social-title">
+            {{'SOCIAL.LIKE' | translate }}
+        </div>
+        <adf-like [nodeId]="nodeId"></adf-like>
+    </mat-card>
+    <mat-card class="app-social-example-area">
+        <div class="app-social-title">
+            {{'SOCIAL.RATING' | translate }}
+        </div>
+        <adf-rating [nodeId]="nodeId"></adf-rating>
+    </mat-card>
 </div>
@@ -1,7 +1,25 @@
-.app-social-example-area {
-    margin: 10px;
-}
+app-social {
+    .app-social-example-areas {
+        flex-direction: column;
+        box-sizing: border-box;
+        display: flex;
+        place-content: stretch flex-start;
+        align-items: stretch;

-.app-social-example-title {
-    padding-bottom: 12px;
+        .app-social-example-area {
+            margin: 10px;
+
+            .app-social-example-title {
+                padding-bottom: 12px;
+            }
+        }
+
+        @media screen and (min-width: 1280px) {
+            flex-direction: row;
+
+            .app-social-example-area {
+                flex: 1 1 auto;
+            }
+        }
+    }
 }
@@ -15,12 +15,13 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-social',
    templateUrl: './social.component.html',
-    styleUrls: ['./social.component.scss']
+    styleUrls: ['./social.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class SocialComponent {

@@ -3,22 +3,18 @@
 <button mat-raised-button id="adf-tag-node-send" (click)="onSubmit()" color="primary">Confirm</button>

 <br>
-<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
-            <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
-        </mat-card>
-    </div>
-    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
-            <div class="app-tag-example-title">
-                {{'TAG.LIST' | translate }}
-            </div>
-            <adf-tag-list></adf-tag-list>
-        </mat-card>
-    </div>
-    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
+<div class="app-tag-example-areas">
+    <mat-card class="app-tag-example-area">
+        <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
+    </mat-card>
+    <mat-card class="app-tag-example-area">
+        <div class="app-tag-example-title">
+            {{'TAG.LIST' | translate }}
+        </div>
+        <adf-tag-list></adf-tag-list>
+    </mat-card>
+    <div class="app-tag-example-area">
+        <mat-card class="app-tag-example-area">
            <div class="app-tag-example-title">
                {{'TAG.NODE_LIST' | translate }}
            </div>
@@ -1,7 +1,25 @@
-.app-tag-example-area {
-    margin: 10px;
-}
+app-tag {
+    .app-tag-example-areas {
+        flex-direction: column;
+        box-sizing: border-box;
+        display: flex;
+        place-content: stretch flex-start;
+        align-items: stretch;

-.app-tag-example-title {
-    padding-bottom: 12px;
+        .app-tag-example-area {
+            margin: 10px;
+
+            .app-tag-example-title {
+                padding-bottom: 12px;
+            }
+        }
+
+        @media screen and (min-width: 1280px) {
+            flex-direction: row;
+
+            .app-tag-example-area {
+                flex: 1 1 auto;
+            }
+        }
+    }
 }
@@ -15,12 +15,13 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-tag',
    templateUrl: './tag.component.html',
-    styleUrls: ['./tag.component.scss']
+    styleUrls: ['./tag.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TagComponent {

--- a/Show More
+++ b/Show More