Fix long form scroll behavior in the action editor (#28455)

frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx

@@ -44,3 +44,9 @@ export const ModalLeft = styled.div`
   flex-direction: column;
   border-right: 1px solid ${color("border")};
 `;
+
+export const ModalRight = styled.div`
+  position: relative;
+  display: flex;
+  overflow-y: auto;
+`;

frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorView.tsx

@@ -14,6 +14,7 @@ import {
   ModalRoot,
   ModalActions,
   ModalLeft,
+  ModalRight,
 } from "metabase/actions/containers/ActionCreator/ActionCreator.styled";
 
 import { isNotNull } from "metabase/core/utils/types";
@@ -116,24 +117,26 @@ export default function ActionCreatorView({
             )}
           </ModalActions>
         </ModalLeft>
-        {activeSideView === "actionForm" ? (
-          <FormCreator
-            params={action.parameters ?? []}
-            formSettings={formSettings}
-            isEditable={isEditable && canChangeFieldSettings}
-            onChange={onChangeFormSettings}
-          />
-        ) : activeSideView === "dataReference" ? (
-          <DataReferenceInline onClose={closeSideView} />
-        ) : activeSideView === "actionSettings" ? (
-          <InlineActionSettings
-            action={action}
-            formSettings={formSettings}
-            isEditable={isEditable}
-            onChangeFormSettings={onChangeFormSettings}
-            onClose={closeSideView}
-          />
-        ) : null}
+        <ModalRight>
+          {activeSideView === "actionForm" ? (
+            <FormCreator
+              params={action.parameters ?? []}
+              formSettings={formSettings}
+              isEditable={isEditable && canChangeFieldSettings}
+              onChange={onChangeFormSettings}
+            />
+          ) : activeSideView === "dataReference" ? (
+            <DataReferenceInline onClose={closeSideView} />
+          ) : activeSideView === "actionSettings" ? (
+            <InlineActionSettings
+              action={action}
+              formSettings={formSettings}
+              isEditable={isEditable}
+              onChangeFormSettings={onChangeFormSettings}
+              onClose={closeSideView}
+            />
+          ) : null}
+        </ModalRight>
       </ActionCreatorBodyContainer>
     </ModalRoot>
   );

frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx

@@ -4,6 +4,8 @@ import { color } from "metabase/lib/colors";
 import SidebarContent from "metabase/query_builder/components/SidebarContent";
 
 export const ActionSettingsContainer = styled.div`
+  width: 100%;
+
   ${SidebarContent.Header.Root} {
     position: sticky;
     top: 0;

frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx

@@ -6,6 +6,7 @@ import SidebarContent from "metabase/query_builder/components/SidebarContent";
 export const DataReferenceContainer = styled.div`
   overflow: hidden;
   position: relative;
+  width: 100%;
   height: 100%;
   background-color: ${color("white")};