From cfd97b045d9bdc6b134eb12837a4b49cf9b785c3 Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 25 Mar 2024 15:56:47 +0100
Subject: [PATCH 1/3] authorization-federated-auth-providers-has-correct-layout

---
 .../src/Dialog/AuthProviderForm/ConfigurationsList.m.css | 7 +++++++
 .../src/Dialog/AuthProviderForm/ConfigurationsList.tsx   | 9 ++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
index 4ee3ae4bd1..548a37fbdb 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
@@ -28,3 +28,10 @@
 .center {
   margin: auto;
 }
+
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  flex: 1;
+}
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
index e692fb2695..ea7efe2ffd 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
@@ -12,7 +12,6 @@ import { AuthProvider, AuthProviderConfiguration, AuthProvidersResource, compare
 import {
   Button,
   Cell,
-  Container,
   Filter,
   getComputed,
   IconOrImage,
@@ -108,7 +107,7 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
 
   if (activeProvider && activeConfiguration) {
     return (
-      <Container className={className} center>
+      <div className={s(style, { container: true }, className)}>
         <Loader state={authTaskState} message="authentication_authorizing" hideException>
           <div className={s(style, { center: true })}>
             {providerDisabled ? (
@@ -123,12 +122,12 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
             )}
           </div>
         </Loader>
-      </Container>
+      </div>
     );
   }
 
   return (
-    <Container className={className} center>
+    <div className={s(style, { container: true }, className)}>
       {configurations.length >= 10 && (
         <Filter
           className={s(style, { filter: true })}
@@ -156,6 +155,6 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
         })}
       </div>
       <Loader state={authTaskState} message="authentication_authorizing" overlay hideException />
-    </Container>
+    </div>
   );
 });

From 9a807dd671132ab15858b5da2efe95aa07ee6019 Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 25 Mar 2024 17:06:39 +0100
Subject: [PATCH 2/3] Revert
 "authorization-federated-auth-providers-has-correct-layout"

This reverts commit cfd97b045d9bdc6b134eb12837a4b49cf9b785c3.
---
 .../src/Dialog/AuthProviderForm/ConfigurationsList.m.css | 7 -------
 .../src/Dialog/AuthProviderForm/ConfigurationsList.tsx   | 9 +++++----
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
index 548a37fbdb..4ee3ae4bd1 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
@@ -28,10 +28,3 @@
 .center {
   margin: auto;
 }
-
-.container {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  flex: 1;
-}
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
index ea7efe2ffd..e692fb2695 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
@@ -12,6 +12,7 @@ import { AuthProvider, AuthProviderConfiguration, AuthProvidersResource, compare
 import {
   Button,
   Cell,
+  Container,
   Filter,
   getComputed,
   IconOrImage,
@@ -107,7 +108,7 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
 
   if (activeProvider && activeConfiguration) {
     return (
-      <div className={s(style, { container: true }, className)}>
+      <Container className={className} center>
         <Loader state={authTaskState} message="authentication_authorizing" hideException>
           <div className={s(style, { center: true })}>
             {providerDisabled ? (
@@ -122,12 +123,12 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
             )}
           </div>
         </Loader>
-      </div>
+      </Container>
     );
   }
 
   return (
-    <div className={s(style, { container: true }, className)}>
+    <Container className={className} center>
       {configurations.length >= 10 && (
         <Filter
           className={s(style, { filter: true })}
@@ -155,6 +156,6 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
         })}
       </div>
       <Loader state={authTaskState} message="authentication_authorizing" overlay hideException />
-    </div>
+    </Container>
   );
 });

From 0b63965048f9c080e0f437cbde11dff4ce49c11b Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 25 Mar 2024 17:36:50 +0100
Subject: [PATCH 3/3] fix: configList layout with container

---
 .../AuthProviderForm/ConfigurationsList.m.css |  6 +----
 .../AuthProviderForm/ConfigurationsList.tsx   | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
index 4ee3ae4bd1..97f493fa89 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.m.css
@@ -7,11 +7,7 @@
  */
 
 .filter {
-  margin: 0 24px 12px 24px;
-}
-
-.list {
-  overflow: auto;
+  margin: 0 24px 4px 24px;
 }
 
 .cell {
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
index e692fb2695..df94a470a6 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
@@ -128,17 +128,19 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
   }
 
   return (
-    <Container className={className} center>
+    <Container className={className} noWrap vertical>
       {configurations.length >= 10 && (
-        <Filter
-          className={s(style, { filter: true })}
-          placeholder={translate('authentication_identity_provider_search_placeholder')}
-          value={search}
-          max
-          onChange={setSearch}
-        />
+        <Container keepSize>
+          <Filter
+            className={s(style, { filter: true })}
+            placeholder={translate('authentication_identity_provider_search_placeholder')}
+            value={search}
+            max
+            onChange={setSearch}
+          />
+        </Container>
       )}
-      <div className={s(style, { list: true })}>
+      <Container overflow>
         {filteredConfigurations.map(({ provider, configuration }) => {
           const icon = configuration.iconURL || provider.icon;
           const title = `${configuration.displayName}\n${configuration.description || ''}`;
@@ -154,7 +156,7 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
             </Link>
           );
         })}
-      </div>
+      </Container>
       <Loader state={authTaskState} message="authentication_authorizing" overlay hideException />
     </Container>
   );