From e1d69812745ff2fd6d4660ead99909c6a34834e6 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 1 Jun 2021 17:35:29 -0700
Subject: [PATCH] Fix mobile layout for outift URLs no-op message

Copied styles from the similar layout in the bulk converter tool! The status will flush to the right of the field header on desktop, and move below the input on mobile.
---
 src/app/OutfitUrlsPage.js | 73 +++++++++++++++++++++++----------------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/src/app/OutfitUrlsPage.js b/src/app/OutfitUrlsPage.js
index 88f5161..965658d 100644
--- a/src/app/OutfitUrlsPage.js
+++ b/src/app/OutfitUrlsPage.js
@@ -193,37 +193,52 @@ function SingleImageConverter() {
         <FormErrorMessage>{parseError?.message || null}</FormErrorMessage>
       </FormControl>
       <FormControl gridArea="output">
-        <Flex marginBottom="2">
-          <FormLabel fontSize="sm" margin="0">
+        <Grid
+          templateAreas={{
+            base: `
+              "header"
+              "input"
+              "status"
+            `,
+            md: `
+              "header status"
+              "input  input"
+            `,
+          }}
+          alignItems="center"
+          rowGap="2"
+        >
+          <FormLabel gridArea="header" fontSize="sm" margin="0">
             Then, use this new URL in your layouts instead:
           </FormLabel>
-          <Box flex="1 0 auto" width="2" />
-          {isAlreadyConverted && (
-            <Flex alignItems="center" fontSize="sm" opacity="0.8">
-              <CheckIcon marginRight="1.5" />
-              <Box>{parseError.message}</Box>
-            </Flex>
-          )}
-        </Flex>
-        <InputGroup size="sm">
-          <Input
-            placeholder="https://impress-outfit-images.openneo.net/outfits/123456789/600.png"
-            isReadOnly
-            value={outputUrl || ""}
-          />
-          {outputUrl && (
-            <InputRightElement width="4rem" paddingRight="1">
-              <Button
-                height="calc(100% - .5rem)"
-                size="xs"
-                minWidth="100%"
-                onClick={onCopy}
-              >
-                {hasCopied ? "Copied!" : "Copy"}
-              </Button>
-            </InputRightElement>
-          )}
-        </InputGroup>
+          <InputGroup gridArea="input" size="sm">
+            <Input
+              placeholder="https://impress-outfit-images.openneo.net/outfits/123456789/600.png"
+              isReadOnly
+              value={outputUrl || ""}
+            />
+            {outputUrl && (
+              <InputRightElement width="4rem" paddingRight="1">
+                <Button
+                  height="calc(100% - .5rem)"
+                  size="xs"
+                  minWidth="100%"
+                  onClick={onCopy}
+                >
+                  {hasCopied ? "Copied!" : "Copy"}
+                </Button>
+              </InputRightElement>
+            )}
+          </InputGroup>
+          <Box gridArea="status" textAlign="right" justifySelf="end">
+            {isAlreadyConverted && (
+              <Flex alignItems="center" fontSize="sm" opacity="0.8">
+                <CheckIcon marginRight="1.5" />
+                <Box>{parseError.message}</Box>
+              </Flex>
+            )}
+          </Box>
+        </Grid>
       </FormControl>
       <AspectRatio
         gridArea="preview"