Fix layout when there is no host displayed

[renatho]

Related to #90806

Proposed Changes

• I noticed that I introduced an issue in the Fix importer layout issues #90806 when the host is not populated (the same happened during the loading when the host is being fetched). In this case, the columns were misaligned, so this PR makes sure that space will be filled, not breaking the layout.

Before this PR:

After this PR:

It doesn't have exactly the same space on the top and in the bottom of the right column. It has +3px in the bottom. The reason is that it avoids flickering when the host is loaded.

With a known host:

Why are these changes being made?

• Fix a layout issue introduced in Fix importer layout issues #90806.

Testing Instructions

• Checkout branch or use the live link.
• Navigate to both links: /setup/site-setup/importerWordpress?siteSlug={FREE_SITE_SLUG}&from=https://www.unknown.unk&option=everything and /setup/site-migration/site-migration-upgrade-plan?from=https://www.unknown.unk&siteSlug={FREE_SITE_SLUG}
• Check that the columns are not misaligned anymore.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-108633

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-108633&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-108633&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/importer-layout-with-no-host on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~21 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
import-hosted-site-flow        +89 B  (+0.0%)      +21 B  (+0.0%)
import-flow                    +89 B  (+0.0%)      +21 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[donnapep]

I'm not a fan of leaving in empty HTML just for styling purposes. When I removed the flex: 1; on the container element, it seemed to work with and without the hosting text. Do you think we could do something like that instead?

[renatho]

I'm not a fan of leaving in empty HTML just for styling purposes. When I removed the flex: 1; on the container element, it seemed to work with and without the hosting text. Do you think we could do something like that instead?

Hi Donna! Removing the flex: 1 wouldn't work because that container also needs to grow when the left column grows (clicking on Show all features, for example).

But I changed the approach to a different one: fec8ff2. I was trying to avoid the duplicate spacing (if we change the spacing of .import__upgrade-plan-hosting-details-identified-host we also need to update the new class), but I added a comment to make it more explicit and it seems a better approach, as you suggested. 😉

[donnapep]

Removing the flex: 1 wouldn't work because that container also needs to grow when the left column grows (clicking on Show all features, for example).

Ah yes. I didn't test that bit. This latest change looks good. 🙂