From 8ee8cfcdf9e5c159ac39c976235ea2195fdfe06d Mon Sep 17 00:00:00 2001
From: Bradley Fellstrom <bfellstrom@easydynamics.com>
Date: Wed, 15 Nov 2023 16:11:54 -0500
Subject: [PATCH] Adjust button styling responsiveness

---
 .../src/components/OSCALLoaderForm.jsx        | 66 +++++++++----------
 packages/oscal-viewer/src/App.js              |  4 +-
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/oscal-react-library/src/components/OSCALLoaderForm.jsx b/packages/oscal-react-library/src/components/OSCALLoaderForm.jsx
index 44a7c139b..3f5f775ec 100644
--- a/packages/oscal-react-library/src/components/OSCALLoaderForm.jsx
+++ b/packages/oscal-react-library/src/components/OSCALLoaderForm.jsx
@@ -40,40 +40,40 @@ export default function OSCALLoaderForm(props) {
       <Grid container spacing={3}>
         {!props.isRestMode && (
           <>
-            <Grid item xs={6} md={9}>
-              <TextField
-                id="oscal-url"
-                label={`OSCAL ${props.oscalObjectType.name} URL`}
-                defaultValue={props.oscalUrl}
-                helperText="(JSON Format)"
-                variant="outlined"
-                fullWidth
-                inputRef={url}
-              />
-            </Grid>
-            <Grid item xs={4} md={2}>
+            <Grid item xs={12} md={12}>
               <Stack direction="row" spacing={1}>
-                <Button
-                  variant="contained"
-                  size="large"
-                  color="primary"
-                  endIcon={<ReplayIcon>send</ReplayIcon>}
-                  disabled={!props.isResolutionComplete}
-                  type="submit"
-                >
-                  Reload
-                </Button>
-                <Button
-                  variant="contained"
-                  size="large"
-                  color="secondary"
-                  endIcon={<FileUploadIcon />}
-                  component="label"
-                  disabled={!props.isResolutionComplete}
-                >
-                  Upload
-                  <input type="file" hidden accept="application/json" onChange={onUpload} />
-                </Button>
+                <TextField
+                  id="oscal-url"
+                  label={`OSCAL ${props.oscalObjectType.name} URL`}
+                  defaultValue={props.oscalUrl}
+                  helperText="(JSON Format)"
+                  variant="outlined"
+                  fullWidth
+                  inputRef={url}
+                />
+                <Stack direction="row" spacing={1} sx={{ height: "3.5rem" }}>
+                  <Button
+                    variant="contained"
+                    size="large"
+                    color="primary"
+                    endIcon={<ReplayIcon>send</ReplayIcon>}
+                    disabled={!props.isResolutionComplete}
+                    type="submit"
+                  >
+                    Reload
+                  </Button>
+                  <Button
+                    variant="contained"
+                    size="large"
+                    color="secondary"
+                    endIcon={<FileUploadIcon />}
+                    component="label"
+                    disabled={!props.isResolutionComplete}
+                  >
+                    Upload
+                    <input type="file" hidden accept="application/json" onChange={onUpload} />
+                  </Button>
+                </Stack>
               </Stack>
             </Grid>
           </>
diff --git a/packages/oscal-viewer/src/App.js b/packages/oscal-viewer/src/App.js
index 30ea9c0df..d70a8b2cf 100644
--- a/packages/oscal-viewer/src/App.js
+++ b/packages/oscal-viewer/src/App.js
@@ -35,8 +35,8 @@ const LogoImage = styled("img")`
   margin-right: 1em;
 `;
 
-const isStyleMode = true;
-const isDevMode = true;
+const isStyleMode = false;
+const isDevMode = false;
 
 const drawerWidth = isDevMode && !isStyleMode ? "20rem" : "0rem";
 const appBarHeight = isDevMode && !isStyleMode ? "5rem" : "0rem";