diff --git a/react/components/LoginAsCustomer.tsx b/react/components/LoginAsCustomer.tsx
index b40d07d..d9cb6e3 100644
--- a/react/components/LoginAsCustomer.tsx
+++ b/react/components/LoginAsCustomer.tsx
@@ -55,7 +55,7 @@ const LoginAsCustomer = (props: Props) => {
   )
 
   return (
-    <div className={`${styles.login} ${mobile && 'w-50'}`}>
+    <div className={`${styles.login} w-50 flex flex-row-reverse-ns flex-row-s`}>
       <Popover
         arrowClasses="bg-base--inverted"
         renderHeader={handleHeaderRendering}
diff --git a/react/components/Popover.tsx b/react/components/Popover.tsx
index eb77b28..069cd1f 100644
--- a/react/components/Popover.tsx
+++ b/react/components/Popover.tsx
@@ -34,10 +34,10 @@ const Popover = (props: Props) => {
 
   const boxClasses = classnames(
     styles.popoverBox,
-    'absolute top-2 z-max bb b--muted-3',
+    'absolute-ns top-2 z-max bb b--muted-3 fixed-s',
     isBoxOpen ? 'flex' : 'dn',
     {
-      'fixed left-0 right-0': mobile,
+      'left-0 right-0': mobile,
     }
   )