style(about): minor layout adjustment

When the "No updates available" message appeared, the rest of the window contents were off center; now fixed.
daisy · Jan 18, 2024 · 592f879 · 592f879
1 parent d25fa8c
commit 592f879
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/renderer/components/AboutView/index.tsx b/src/renderer/components/AboutView/index.tsx
@@ -133,7 +133,7 @@ export function AboutView({ title }) {
                 Visit the DAISY Pipeline homepage
             </a>
             <div className="info">
-                <p>
+                <p className="versions">
                     <ul>
                         <li>App version: {version}</li>
                         <li>Engine version: {engineVersion}</li>
@@ -162,7 +162,7 @@ export function AboutView({ title }) {
                 </p>
                 <div className="actions">
                     {update.updateMessage && (
-                        <p>
+                        <p className="updateMessage">
                             <label
                                 {...(update.downloadProgress
                                     ? { htmlFor: 'update-download-progress' }
@@ -172,8 +172,10 @@ export function AboutView({ title }) {
                             </label>
                         </p>
                     )}
-                    {UpdateButton(update)}
-                    <button onClick={(e) => closeAboutBox()}>Close</button>
+                    <div>
+                        {UpdateButton(update)}
+                        <button onClick={(e) => closeAboutBox()}>Close</button>
+                    </div>
                 </div>
             </div>
         </main>

diff --git a/src/renderer/style/style.scss b/src/renderer/style/style.scss
@@ -443,7 +443,7 @@ main.about {
         justify-content: space-between;
         height: 100%;
         margin-bottom: var(--pad);
-        p {
+        p.versions {
             display: flex;
             flex-direction: row;
             gap: 0.25em;
@@ -460,10 +460,15 @@ main.about {
         }
         .actions {
             width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .actions > div {
             display: flex;
             flex-direction: row;
-            flex-wrap: wrap;
             justify-content: space-around;
+            margin-top: 0.5rem;
         }
 
         .actions p {
@@ -480,8 +485,6 @@ main.about {
             margin-right: 0em;
         }
     }
-
-
 }
 
 input.grayedout {