1 files changed, 19 insertions, 4 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index e77e7d542..7c3bb3943 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -129,6 +129,12 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
     }
   }
 `
+export const Middle = styled.div`
+    justify-content: space-around;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`
 
 export const PopupBox = styled.div<{ noPadding?: boolean }>`
   height: 290px;
@@ -138,11 +144,10 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
   justify-content: space-between;
 
   & > section {
-    padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'};
-    padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'};
+    padding: ${({ noPadding }) => noPadding ? '0px' : '8px'};
     // this margin will send the section up when used with a header
     margin-bottom: auto; 
-    overflow: auto;
+    overflow-y: auto;
 
     table td {
       padding: 5px 10px;
@@ -153,6 +158,16 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
     }
   }
 
+  & > section[data-expanded] {
+    height: 100%;
+  }
+
+  & > section[data-centered] {
+    justify-content: center;
+    display: flex;
+    /* flex-direction: column; */
+  }
+
   & > header {
     flex-direction: row;
     justify-content: space-between;
@@ -596,7 +611,7 @@ export const NiceSelect = styled.div`
 
   position: relative;
   display: flex;
-  width: 10em;
+  /* width: 10em; */
   overflow: hidden;
   border-radius: .25em;