diff --git a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx index efe3eed4a51335a9588cb5df7da8966ce92b6bdb..3022298b1649ac99c554aa8c60bc2925960ae2e3 100644 --- a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx +++ b/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; +`; diff --git a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorView.tsx b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorView.tsx index 01dc9fbe1c7dfb8399130cf1e767607d78b6adec..881c1a000ca79f24636dc8b3e9c3e5d11ed9e2c0 100644 --- a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorView.tsx +++ b/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> ); diff --git a/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx index 6552dcc4247612cd4ece7188ee5a000cfd3e521b..2998d151960d81a5fd226bf3ee42b78cf455fca6 100644 --- a/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx +++ b/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; diff --git a/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx index c9c750eeba5e0dbdc01fdef108151102c29cefbd..db0da0e91331cc79c48bf1bce3ea5a5d9bbc36f7 100644 --- a/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx +++ b/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")};