From 83e3560e4481a404aa6e50e74352c97f36b50765 Mon Sep 17 00:00:00 2001
From: Hyungu Kang | Airen <gusrn1423@naver.com>
Date: Thu, 12 Sep 2024 12:25:36 +0900
Subject: [PATCH] fix: added missing prevent ios mobile zoom trick (#361)

## Changes
- Fixed that prevent zoom when focusing on input in iOS mobile

ticket: []

## Additional Notes
-

## Checklist
Before requesting a code review, please check the following:
- [x] **[Required]** CI has passed all checks.
- [x] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [x] **[Required]** Unnecessary comments/debugging code have been
removed.
- [x] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.
---
 src/components/chat/ui/ChatInput.tsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/chat/ui/ChatInput.tsx b/src/components/chat/ui/ChatInput.tsx
index b9a51588f..df1062d55 100644
--- a/src/components/chat/ui/ChatInput.tsx
+++ b/src/components/chat/ui/ChatInput.tsx
@@ -1,4 +1,4 @@
-import { css } from '@linaria/core';
+import { css, cx } from '@linaria/core';
 import { useRef, useState } from 'react';
 
 import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
@@ -24,7 +24,7 @@ export const ChatInput = () => {
   });
 
   return (
-    <div className={container}>
+    <div className={cx(container, isIOSMobile && iosMobileContainer)}>
       <MessageInputWrapperView
         loading={false}
         disabled={config.isOnline ? isMessageInputDisabled : true}
@@ -52,6 +52,25 @@ export const ChatInput = () => {
   );
 };
 
+// Not to zoom in on mobile set font-size to 16px which blocks the zooming on iOS
+// @link: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming
+const iosMobileContainer = css`
+  &&&& {
+    .sendbird-message-input-text-field {
+      min-height: 40px;
+      height: 40px;
+      font-size: 16px;
+      line-height: 24px;
+    }
+    .sendbird-message-input--placeholder {
+      font-size: 16px;
+    }
+    .sendbird-message-input--attach {
+      inset-block-end: 4px;
+    }
+  }
+`;
+
 const container = css`
   z-index: 0;
   border: none;
@@ -82,9 +101,6 @@ const container = css`
         padding-bottom: 8px;
         padding-inline-start: 16px;
         border-radius: 20px;
-        // Not to zoom in on mobile set font-size to 16px which blocks the zooming on iOS
-        // @link: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming
-        font-size: ${isIOSMobile ? 16 : 14}px;
         resize: none;
         border: none;
         outline: none;