E2E/Playwright: MM-T5424 Find channel limit to 50 results (#23248)

* fix aria-label of Find Channels modal

* add components

* add test for MM-T5424

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/support/test_fixture.ts

@@ -1,8 +1,9 @@
-import {test as base, Browser} from '@playwright/test';
+import {test as base, Browser, ViewportSize} from '@playwright/test';
 
 import {TestBrowser} from './browser_context';
 import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldSkipInSmallScreen, shouldRunInLinux} from './flag';
 import {initSetup, getAdminClient} from './server';
+import {isSmallScreen} from './util';
 import {hideDynamicChannelsContent, waitForAnimationEnd, waitUntil} from './test_action';
 import {pages} from './ui/pages';
 import {matchSnapshot} from './visual';
@@ -15,8 +16,8 @@ type ExtendedFixtures = {
 };
 
 export const test = base.extend<ExtendedFixtures>({
-    pw: async ({browser}, use) => {
-        const pw = new PlaywrightExtended(browser);
+    pw: async ({browser, viewport}, use) => {
+        const pw = new PlaywrightExtended(browser, viewport);
         await use(pw);
         await pw.testBrowser.close();
     },
@@ -48,10 +49,13 @@ class PlaywrightExtended {
     // ./ui/pages
     readonly pages;
 
+    // ./util
+    readonly isSmallScreen;
+
     // ./visual
     readonly matchSnapshot;
 
-    constructor(browser: Browser) {
+    constructor(browser: Browser, viewport: ViewportSize | null) {
         // ./browser_context
         this.testBrowser = new TestBrowser(browser);
 
@@ -73,6 +77,9 @@ class PlaywrightExtended {
         // ./ui/pages
         this.pages = pages;
 
+        // ./util
+        this.isSmallScreen = () => isSmallScreen(viewport);
+
         // ./visual
         this.matchSnapshot = matchSnapshot;
     }