Merge pull request #21754 from Yoast/295-ftc-is-broken-in-mobile-for-…

…the-new-dashboard FTC: remove fixed width and HR
Yoast · Oct 28, 2024 · e77fc96 · e77fc96
2 parents 050de70 + 0bf6151
commit e77fc96
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/...s/js/src/first-time-configuration/tailwind-components/steps/indexation/indexation-step.js b/...s/js/src/first-time-configuration/tailwind-components/steps/indexation/indexation-step.js
@@ -1,12 +1,9 @@
-import { Fragment } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import PropTypes from "prop-types";
 import { ReactComponent as ConfigurationStartImage } from "../../../../../images/indexables_1_left_bubble_optm.svg";
 import { FadeInAlert } from "../../base/alert";
 import { ConfigurationIndexation } from "./configuration-indexation";
 
-/* eslint-disable complexity */
-
 /**
  * The indexation step.
  *
@@ -18,17 +15,17 @@ import { ConfigurationIndexation } from "./configuration-indexation";
  * @returns {WPElement} The indexation step.
  */
 export default function IndexationStep( { indexingState, setIndexingState, showRunIndexationAlert, isStepperFinished } ) {
-	return <Fragment>
-		<div className="yst-flex yst-flex-row yst-justify-between yst-flex-wrap yst-mb-8">
-			<p className="yst-text-sm yst-whitespace-pre-line yst-w-[463px]">
+	return <div className="yst-@container">
+		<div className="yst-flex yst-flex-col @lg:yst-flex-row yst-gap-6 yst-mb-8">
+			<p className="yst-text-sm yst-whitespace-pre-line">
 				{ __(
 					"Let's start by running the SEO data optimization. That means we'll scan your site and create a database with " +
 					"optimized SEO data. It won't change any content or settings on your site and you don't need to do anything, just hit start!\n" +
 					"\nNote: If you have a lot of content, this optimization could take a moment. But trust us, it's worth it!",
 					"wordpress-seo"
 				) }
 			</p>
-			<ConfigurationStartImage className="yst-h-28 yst-w-24 yst-mr-6" />
+			<ConfigurationStartImage className="yst-shrink-0 yst-h-28 yst-w-24" />
 		</div>
 		<div id="yoast-configuration-indexing-container" className="indexation-container">
 			<ConfigurationIndexation
@@ -48,7 +45,7 @@ export default function IndexationStep( { indexingState, setIndexingState, showR
 					"wordpress-seo" )
 			}
 		</FadeInAlert>
-	</Fragment>;
+	</div>;
 }
 
 IndexationStep.propTypes = {

diff --git a/packages/js/src/general/routes/first-time-configuration.js b/packages/js/src/general/routes/first-time-configuration.js
@@ -21,7 +21,6 @@ const FirstTimeConfiguration = () => {
 				title={ __( "First-time configuration", "wordpress-seo" ) }
 				description={ __( "Tell us about your site, so we can get it ranked! Let's get your site in tip-top shape for the search engines. Follow these 5 steps to make Google understand what your site is about.", "wordpress-seo" ) }
 			>
-				<hr id="configuration-hr-top" />
 				<div id="yoast-configuration" className="yst-p-8 yst-max-w-[715px]">
 					<FirstTimeConfigurationSteps />
 				</div>