fix: 💄 frame buttons are now clickable when app is loading

imxeno · Dec 2, 2021 · 8a80e51 · 8a80e51
1 parent 7e187b3
commit 8a80e51
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -1,9 +1,9 @@
 .container {
+  position: relative;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   -webkit-app-region: drag;
+  display: flex;
+  flex-direction: column;
 }
 
 .container .webview {
@@ -13,3 +13,25 @@
   border: none;
   -webkit-app-region: no-drag;
 }
+
+.frameButtonBackgroundContainer {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.frameButtonBackground {
+  /* Frame button dimensions */
+  height: 30px;
+  width: 138px;
+  -webkit-app-region: no-drag;
+}
+
+.spinnerContainer {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 30px;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -43,7 +43,16 @@ export default function App() {
         onLoadStart={onLoadStart}
         allow="encrypted-media *;"
       />
-      {!shown && <Spinner />}
+      {!shown && (
+        <>
+          <div className={styles.frameButtonBackgroundContainer}>
+            <div className={styles.frameButtonBackground} />
+          </div>
+          <div className={styles.spinnerContainer}>
+            <Spinner />
+          </div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/components/Spinner.module.css b/src/components/Spinner.module.css
@@ -3,8 +3,6 @@ div.spinner {
   width: 54px;
   height: 54px;
   display: inline-block;
-  margin-left: 50%;
-  margin-right: 50%;
   padding: 10px;
   border-radius: 10px;
 }