Fix responive issues in long pages.

Shaaali · Apr 15, 2021 · 8aa9437 · 8aa9437
1 parent 7b021ef
commit 8aa9437
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/apps/console/src/features/applications/components/settings/access-configuration.tsx b/apps/console/src/features/applications/components/settings/access-configuration.tsx
@@ -463,7 +463,7 @@ export const AccessConfiguration: FunctionComponent<AccessConfigurationPropsInte
         }
 
         return (
-            <EmphasizedSegment className="protocol-settings-section" padded="very">
+            <EmphasizedSegment className="protocol-settings-section form-wrapper with-max-height" padded="very">
                 {
                     Object.values(SupportedAuthProtocolTypes).includes(selectedProtocol as SupportedAuthProtocolTypes)
                         ? (

diff --git a/modules/theme/src/theme-core/definitions/apps/developer-portal.less b/modules/theme/src/theme-core/definitions/apps/developer-portal.less
@@ -731,3 +731,21 @@
         }
     }
 }
+
+/*-------------------------------
+      Form Container Styles
+--------------------------------*/
+.form-wrapper {
+    &.with-max-height {
+        max-height: @formWrapperMaxHeight;
+        overflow: auto;
+    }
+}
+.form-container {
+    &.with-max-width {
+        max-width: @formContainerMaxWidth;
+    }
+    &.subject-attribute-selection {
+        max-width: @applicationSubjectSelectWidth;
+    }
+}
diff --git a/modules/theme/src/themes/default/apps/developer-portal.variables b/modules/theme/src/themes/default/apps/developer-portal.variables
@@ -68,3 +68,11 @@
 --------------------------------*/
 
 @idpTemplateGridPaddingTop: 1.5em;
+
+/*----------------------------------
+          Form Container
+------------------------------------*/
+
+@formContainerMaxWidth: 750px;
+@formWrapperMaxHeight: 55vh;
+@applicationSubjectSelectWidth: 820px;
diff --git a/modules/theme/src/themes/default/collections/grid.overrides b/modules/theme/src/themes/default/collections/grid.overrides
@@ -365,15 +365,3 @@
         }
     }
 }
-
-/*----------------------------------
-          Form Grids
-------------------------------------*/
-
-.ui.grid {
-    &.form-container {
-        &.with-max-width {
-            max-width: @formGridContainerMaxWidth;
-        }
-    }
-}