Fix public action page look (#28365)

* Fix unexpected `footerVariant` prop

* Fix `body` background color

* Fix horizontal scroll on mobile

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.css

+body {
+  background-color: transparent;
+}
+
 .EmbedFrame {
   background-color: white;
 }

frontend/src/metabase/public/containers/PublicAction/PublicAction.styled.tsx

@@ -3,6 +3,7 @@ import { css } from "@emotion/react";
 import FormSubmitButton from "metabase/core/components/FormSubmitButton";
 import BaseLoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { color } from "metabase/lib/colors";
+import { breakpointMaxSmall } from "metabase/styled-components/theme";
 
 export const LoadingAndErrorWrapper = styled(BaseLoadingAndErrorWrapper)`
   display: flex;
@@ -25,6 +26,11 @@ export const FormContainer = styled.div`
   ${FormSubmitButton.Button} {
     width: 100%;
   }
+
+  ${breakpointMaxSmall} {
+    width: 100%;
+    padding: 0 0.5rem;
+  }
 `;
 
 const titleStyle = css`

frontend/src/metabase/public/containers/PublicAction/PublicActionLoader.tsx

@@ -62,7 +62,7 @@ function PublicActionLoader({ params, setErrorPage }: Props) {
   }, [action, params.uuid, setErrorPage]);
 
   return (
-    <EmbedFrame footerVariant="big">
+    <EmbedFrame footerVariant="large">
       <LoadingAndErrorWrapper loading={!action}>
         {renderContent}
       </LoadingAndErrorWrapper>