Fix alignment in dashboard

edgedb · Sep 10, 2024 · 09c9882 · 09c9882
1 parent 6cd1f2e
commit 09c9882
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/shared/studio/tabs/dashboard/databaseDashboard.module.scss b/shared/studio/tabs/dashboard/databaseDashboard.module.scss
@@ -24,9 +24,17 @@
   flex-direction: column;
   gap: 8px;
   align-items: center;
-  justify-content: center;
   color: #555;
 
+  .loading {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+  }
+
   @include darkTheme {
     color: #aaa;
   }

diff --git a/shared/studio/tabs/dashboard/index.tsx b/shared/studio/tabs/dashboard/index.tsx
@@ -44,8 +44,10 @@ export const DatabaseDashboard = observer(function DatabaseDashboard() {
   if (dbState.schemaId == null) {
     return (
       <div className={styles.dashboard}>
-        <Spinner size={20} />
-        Loading schema...
+        <div className={styles.loading}>
+          <Spinner size={20} />
+          Loading schema...
+        </div>
       </div>
     );
   }
@@ -207,8 +209,8 @@ const FirstRunDashboard = observer(function FirstRunDashboard() {
                   instanceState.creatingExampleDB
                     ? `Creating example ${dbOrBranch}...`
                     : exampleDBExists
-                    ? `Switch to example ${dbOrBranch}`
-                    : `Create example ${dbOrBranch}`
+                      ? `Switch to example ${dbOrBranch}`
+                      : `Create example ${dbOrBranch}`
                 }
                 loading={instanceState.creatingExampleDB}
                 disabled={instanceState.creatingExampleDB}