Fix layout and resizing issues in the extension popup (#933)

penumbra-zone · Apr 13, 2024 · c7a07df · c7a07df
1 parent 8ddbaeb
commit c7a07df
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/apps/extension/src/routes/popup/approval/approve-deny.tsx b/apps/extension/src/routes/popup/approval/approve-deny.tsx
@@ -17,7 +17,7 @@ export const ApproveDeny = ({
   useEffect(startCountdown, [startCountdown]);
 
   return (
-    <div className='fixed inset-x-0 bottom-0 flex flex-row flex-wrap justify-center gap-4 bg-black p-4 shadow-lg'>
+    <div className='flex flex-row flex-wrap justify-center gap-4 bg-black p-4 shadow-lg'>
       <Button variant='gradient' className='w-full' size='lg' onClick={approve} disabled={!!count}>
         Approve {count !== 0 && `(${count})`}
       </Button>

diff --git a/apps/extension/src/routes/popup/approval/origin.tsx b/apps/extension/src/routes/popup/approval/origin.tsx
@@ -98,7 +98,9 @@ export const OriginApproval = () => {
             </div>
           </div>
         </div>
-        <ApproveDeny approve={approve} deny={deny} ignore={lastRequest && ignore} wait={3} />
+        <div className='flex grow flex-col justify-end'>
+          <ApproveDeny approve={approve} deny={deny} ignore={lastRequest && ignore} wait={3} />
+        </div>
       </div>
     </FadeTransition>
   );

diff --git a/apps/extension/src/routes/popup/approval/transaction/index.tsx b/apps/extension/src/routes/popup/approval/transaction/index.tsx
@@ -32,8 +32,8 @@ export const TransactionApproval = () => {
   };
 
   return (
-    <div className='flex h-screen flex-col justify-between'>
-      <div className='grow overflow-auto p-[30px] pb-44 pt-10'>
+    <div className='flex h-screen flex-col'>
+      <div className='grow overflow-auto p-[30px] pt-10'>
         <p className='bg-text-linear bg-clip-text pb-2 font-headline text-2xl font-bold text-transparent'>
           Confirm transaction
         </p>
@@ -49,6 +49,7 @@ export const TransactionApproval = () => {
           <JsonViewer jsonObj={authorizeRequest.toJson() as Jsonified<AuthorizeRequest>} />
         </div>
       </div>
+
       <ApproveDeny approve={approve} deny={deny} wait={3} />
     </div>
   );

diff --git a/apps/extension/src/routes/popup/popup-layout.tsx b/apps/extension/src/routes/popup/popup-layout.tsx
@@ -12,7 +12,7 @@ import { Outlet } from 'react-router-dom';
  * then removing the hard-coded width from `globals.css`.
  */
 export const PopupLayout = () => (
-  <div className='flex min-h-full flex-col bg-card-radial'>
+  <div className='flex grow flex-col bg-card-radial'>
     <Outlet />
   </div>
 );
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
@@ -59,8 +59,11 @@
   }
 
   #popup-root {
-    width: 400px;
-    height: 600px;
+    min-width: 400px;
+    min-height: 600px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     @apply bg-charcoal;
   }