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] 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>