Fix label position

src/components/BottomLabel.css

@@ -9,9 +9,18 @@
   font-size: 14px;
 }
 
+.top-right-label {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  font-weight: normal;
+  color: #4A4863;
+  font-size: 14px;
+}
+
 .dot {
   width: 2px;
   height: 2px;
   background: currentColor;
   border-radius: 100px;
-}
+}

src/components/BottomLabel.tsx

@@ -12,3 +12,9 @@ export function BottomLabel() {
     </h3>
   );
 }
+
+export function TopRightLabel() {
+  const version = useVersion({ prefixed: true });
+
+  return <h3 className="top-right-label">{version}</h3>;
+}

src/popup.tsx

@@ -1,4 +1,4 @@
-import { BottomLabel } from '~components/BottomLabel';
+import { BottomLabel, TopRightLabel } from '~components/BottomLabel';
 import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
 import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
@@ -18,12 +18,18 @@ function IndexPopup() {
   if (!hasPermission) page = 'perm';
   else if (!domain) page = 'disabled';
 
-  return (
+  return page === 'perm' ? (
+    <Frame>
+      <div className="popup">
+        <PermissionMissingScreen />
+        <TopRightLabel />
+      </div>
+    </Frame>
+  ) : (
     <Frame>
       <div className="popup">
         {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
         {page === 'disabled' ? <DisabledScreen /> : null}
-        {page === 'perm' ? <PermissionMissingScreen /> : null}
         <BottomLabel />
       </div>
     </Frame>