fix(#2248): add style conditions for mobile popup

src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx

@@ -1,4 +1,8 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+import { devices } from 'config/devices'
+
 import { ModalWindow } from 'features/Modal/styled'
 import {
   ApplyButton,
@@ -10,11 +14,26 @@ import {
 export const Modal = styled(BaseModal)`
   ${ModalWindow} {
     min-height: 220px;
+
+    ${isMobileDevice
+    ? css`
+          @media ${devices.mobile} {
+            width: 95vw;
+            padding-top: 0;
+          }
+        `
+    : ''};
   }
 `
 
 export const ScHeaderTitle = styled(HeaderTitle)`
   text-align: center;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 20px;
+      `
+    : ''};
 `
 
 export const ScBody = styled(Body)`
@@ -23,8 +42,20 @@ export const ScBody = styled(Body)`
 
 export const ScText = styled.span`
   text-align: center;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 14px;
+      `
+    : ''};
 `
 
 export const ScApplyButton = styled(ApplyButton)`
   margin: 0;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 14px;
+      `
+    : ''};
 `