Update UI styles

Author: projkov

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  position: relative;
   height: 100vh;
 }
 
@@ -92,30 +92,9 @@ button:disabled {
   height: 100vh;
 }
 
-.mainContainer {
-  height: 100vh;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 100px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: 6px;
-  padding-right: 6px;
-  background-color: rgba(4, 217, 217, 0.1);
-}
-
 .content {
   display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
+  flex-direction: row;
 }
 
 .header {
@@ -133,10 +112,23 @@ button:disabled {
 }
 
 .editor {
+  display: flex;
+  margin-left: 50px;
   height: 100vh;
 }
 
 .logo {
   width: 50px;
   border-radius: 8px;
+}
+
+.infoButton {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  z-index: 100;
+}
+
+.infoContent {
+  text-align: center;
 }

src/App.tsx

@@ -17,55 +17,50 @@ const App: React.FC = () => {
 
   return (
     <div className="App">
+      <div className='infoButton'>
+        <button onClick={() => setInfoModalOpen(true)}><Info fontSize={24} /></button>
+      </div>
       {isLoading ? <Loader /> : null}
       <Modal show={infoModalOpen} onClose={() => setInfoModalOpen(false)}>
-        <>
+        <div className='infoContent'>
           <h1>Open source UI for the FHIRPath expression</h1>
           <p><a href="https://github.com/projkov/fhirpath-ui" target="_blank" rel="noreferrer">GitHub Repo</a></p>
           <p>Developed by <a href="https://github.com/projkov" target="_blank" rel="noreferrer">Pavel Rozhkov</a></p>
           <p><a href="https://github.com/beda-software/fhirpath-py" target="_blank" rel="noreferrer">FHIRPath</a> engine developed by <a href="https://beda.software" target="_blank" rel="noreferrer">Beda Software</a></p>
-        </>
+        </div>
       </Modal>
-      <div className='mainContainer'>
-        <div className='sidebar'>
-          <img src={logo} alt="Logo" className='logo' />
-          <button onClick={() => setInfoModalOpen(true)}><Info fontSize={24} /></button>
+      <div className='header'>
+        <img src={logo} alt="Logo" className='logo' />
+        <div className='searchBlock'>
+          <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
         </div>
-        <div className='content'>
-          <div className='header'>
-            <div className='searchBlock'>
-              <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
-            </div>
-            <div className="buttonsBlock">
-              <button onClick={handleFetch} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
-              <button onClick={handleExecute} disabled={!isExecuteActive}><Play fontSize={24} /></button>
-              <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
-            </div>
+        <div className="buttonsBlock">
+          <button onClick={handleFetch} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
+          <button onClick={handleExecute} disabled={!isExecuteActive}><Play fontSize={24} /></button>
+          <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
+        </div>
+      </div>
+      <div className='editor'>
+        <Allotment defaultSizes={[550, 250]}>
+          <div className='editorWrapper'>
+            <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
           </div>
-          <div className='editor'>
-            <Allotment defaultSizes={[550, 250]}>
+          <div style={{ height: '100vh' }}>
+            <Allotment defaultSizes={[100, 300]} vertical>
               <div className='editorWrapper'>
-                <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
+                <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
               </div>
-              <div style={{ height: '100vh' }}>
-                <Allotment defaultSizes={[100, 300]} vertical>
-                  <div className='editorWrapper'>
-                    <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
-                  </div>
-                  <div className='editorWrapper'>
-                    <Editor defaultLanguage="json" value={result} options={{
-                      formatOnPaste: true,
-                      formatOnType: true,
-                      readOnly: true,
-                    }} />
-                  </div>
-                </Allotment>
+              <div className='editorWrapper'>
+                <Editor defaultLanguage="json" value={result} options={{
+                  formatOnPaste: true,
+                  formatOnType: true,
+                  readOnly: true,
+                }} />
               </div>
             </Allotment>
           </div>
-        </div>
+        </Allotment>
       </div>
-
     </div>
   );
 };