updating schema and response to stack full width on sm-md devices

Author: Kayla Wilkins

src/components/2_molecules/BodySchema.js

@@ -23,8 +23,8 @@ export const BodySchema = props => {
             b &&
             b.readOnly !== true && (
               <div key={i} className="response-wrapper">
-                <div className="flex mb-4 pt-2 -mx-2 lg:mx-0 initResponse">
-                  <div className="w-1/2 px-2 lg:w-1/4 lg:px-0">
+                <div className="lg:flex mb-4 pt-2 initResponse">
+                  <div className="w-full lg:w-1/4">
                     <div>
                       <b className={b.deprecated && "line-through"}>{p}</b>
                     </div>
@@ -52,7 +52,7 @@ export const BodySchema = props => {
                       </div>
                     )}
                   </div>
-                  <div className="w-1/2 px-2 lg:w-3/4 lg:px-0">
+                  <div className="w-full lg:w-3/4">
                     <div className="text-sm leading-text-sm text-grey-darkest">
                       {b.type} <CharDisplay data={b} />
                       {b.pattern && <span className="tag">{b.pattern}</span>}
@@ -87,8 +87,8 @@ export const BodySchema = props => {
                   b &&
                   b.readOnly === undefined && (
                     <div key={i} className="response-wrapper">
-                      <div className="flex pt-2 mb-4 -mx-2 lg:mx-0 initResponse">
-                        <div className="w-1/2 px-2 lg:w-1/4 lg:px-0">
+                      <div className="lg:flex pt-2 mb-4 initResponse">
+                        <div className="w-full lg:w-1/4">
                           <div>
                             <b>{p}</b>
                           </div>
@@ -135,7 +135,7 @@ export const BodySchema = props => {
                             )}
                           </div>
                         </div>
-                        <div className="w-1/2 px-2 lg:w-3/4 lg:px-0">
+                        <div className="w-full lg:w-3/4">
                           <div className="text-sm leading-text-sm text-grey-darkest">
                             {b.type} <CharDisplay data={b} />
                             {b.pattern && (

src/components/2_molecules/ResponseItemElements.js

@@ -18,8 +18,8 @@ export const ResponseItemElements = props => {
             return (
               l && (
                 <div key={i} className="response-wrapper">
-                  <div className="flex mb-2 pt-2 -mx-2 lg:mx-0 initResponse">
-                    <div className="w-1/2 px-2 lg:w-1/4 lg:px-0">
+                  <div className="lg:flex mb-2 pt-2 initResponse">
+                    <div className="w-full lg:w-1/4">
                       <div>
                         <b className={l.deprecated && "line-through"}>{p}</b>
                       </div>
@@ -31,7 +31,7 @@ export const ResponseItemElements = props => {
                         </div>
                       )}
                     </div>
-                    <div className="w-1/2 px-2 lg:w-3/4 lg:px-0">
+                    <div className="w-full lg:w-3/4">
                       <div>
                         <div className="text-sm leading-text-sm text-grey-darkest">
                           {context.content.application_json.schema.properties
@@ -79,15 +79,15 @@ export const ResponseItemElements = props => {
                         const data = l.properties[e];
                         return (
                           data && (
-                            <div key={i} className="flex -mx-2 mb-4 lg:mx-0">
-                              <div className="w-1/2 px-2 lg:w-1/4 lg:px-0">
+                            <div key={i} className="lg:flex mb-4">
+                              <div className="w-full lg:w-1/4">
                                 <b
                                   className={data.deprecated && "line-through"}
                                 >
                                   {e}
                                 </b>
                               </div>
-                              <div className="w-1/2 px-2 lg:w-3/4 lg:px-0">
+                              <div className="w-full lg:w-3/4">
                                 <div>
                                   <div className="text-sm text-grey-darkest">
                                     {data.type && data.type}{" "}
@@ -143,8 +143,8 @@ export const ResponseItemElements = props => {
                           const data = l.items.properties[e];
                           return (
                             data && (
-                              <div key={i} className="flex -mx-2 mb-4 lg:mx-0">
-                                <div className="w-1/2 px-2 lg:w-1/4 lg:px-0">
+                              <div key={i} className="lg:flex mb-4">
+                                <div className="w-full lg:w-1/4">
                                   <b
                                     className={
                                       data.deprecated && "line-through"
@@ -153,7 +153,7 @@ export const ResponseItemElements = props => {
                                     {e}
                                   </b>
                                 </div>
-                                <div className="w-1/2 px-2 lg:w-3/4 lg:px-0">
+                                <div className="w-full lg:w-3/4">
                                   <div>
                                     <div className="text-sm text-grey-darkest leading-text-sm">
                                       {data.type && data.type}