From 5ecc3d7865f81e6989064d4543c1f9eca56d980f Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Thu, 1 Jun 2023 16:37:40 -0500
Subject: [PATCH 1/3] fix(catalog-import): Fix stepper component order.

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 .../components/DefaultImportPage/DefaultImportPage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx
index 30cce9603a..f0c9d3c33a 100644
--- a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx
+++ b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx
@@ -47,14 +47,14 @@ export const DefaultImportPage = () => {
           </SupportButton>
         </ContentHeader>
 
-        <Grid container spacing={2} direction="row-reverse">
-          <Grid item xs={12} md={4} lg={6} xl={8}>
-            <ImportInfoCard />
-          </Grid>
-
+        <Grid container spacing={2}>
           <Grid item xs={12} md={8} lg={6} xl={4}>
             <ImportStepper />
           </Grid>
+
+          <Grid item xs={12} md={4} lg={6} xl={8}>
+            <ImportInfoCard />
+          </Grid>
         </Grid>
       </Content>
     </Page>

From 309d2973adb4ef526fc0bd58508caefe19b2a029 Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Thu, 1 Jun 2023 16:45:09 -0500
Subject: [PATCH 2/3] fix(catalog-import): Add changeset

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 .changeset/cold-pillows-mix.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cold-pillows-mix.md

diff --git a/.changeset/cold-pillows-mix.md b/.changeset/cold-pillows-mix.md
new file mode 100644
index 0000000000..12dc9422aa
--- /dev/null
+++ b/.changeset/cold-pillows-mix.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-import': patch
+---
+
+Swap `ImportStepper` and `InfoCard` order to fix tab order in `catalog-import`.

From 1aecd7e3811c27841ef849a4c35f94f156b1d111 Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Thu, 1 Jun 2023 17:24:36 -0500
Subject: [PATCH 3/3] fix(catalog-import): Use media queries to sort content
 order

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 .../DefaultImportPage/DefaultImportPage.tsx   | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx
index f0c9d3c33a..c777953808 100644
--- a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx
+++ b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx
@@ -22,7 +22,7 @@ import {
   SupportButton,
 } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import { Grid } from '@material-ui/core';
+import { Grid, useMediaQuery, useTheme } from '@material-ui/core';
 import React from 'react';
 import { ImportInfoCard } from '../ImportInfoCard';
 import { ImportStepper } from '../ImportStepper';
@@ -33,9 +33,21 @@ import { ImportStepper } from '../ImportStepper';
  * @public
  */
 export const DefaultImportPage = () => {
+  const theme = useTheme();
   const configApi = useApi(configApiRef);
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const appTitle = configApi.getOptional('app.title') || 'Backstage';
 
+  const contentItems = [
+    <Grid item xs={12} md={4} lg={6} xl={8}>
+      <ImportInfoCard />
+    </Grid>,
+
+    <Grid item xs={12} md={8} lg={6} xl={4}>
+      <ImportStepper />
+    </Grid>,
+  ];
+
   return (
     <Page themeId="home">
       <Header title="Register an existing component" />
@@ -48,13 +60,7 @@ export const DefaultImportPage = () => {
         </ContentHeader>
 
         <Grid container spacing={2}>
-          <Grid item xs={12} md={8} lg={6} xl={4}>
-            <ImportStepper />
-          </Grid>
-
-          <Grid item xs={12} md={4} lg={6} xl={8}>
-            <ImportInfoCard />
-          </Grid>
+          {isMobile ? contentItems : contentItems.reverse()}
         </Grid>
       </Content>
     </Page>