Button next to input field is being cutoff when user tries to enter text in input on iPhone

Question

We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. This is displaying properly. But when user enters any text, send button cuts off. This is working good in the laptop and on all the mobiles except Iphone where the send button is getting cutoff when user tries to enter any text. Below is the code.

HTML

    <div class="chat-container">
      <header class="chat-header">
        <img class="header-img" />
        <button type="button" class="icon-close"></button>
      </header>

      <ul class="chat-ul"></ul>

      <div class="send-message">
        <div class="user-text">
          <input class="entered-text" />
        </div>
        <button id="send" class="gray-button" type="button"> Send </button>
      </div>
    </div>

CSS

.chat-container {
  background: #fff;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border-right: 1px solid #d8dada;
  border-left: 1px solid #d8dada;
}
.chat-container > div:last-of-type {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding-right: 10px;
}

body > div > div > div:nth-child(2) > span {
  background: #dadada;
  padding: 10px;
  font-size: 21px;
  border-radius: 50%;
}
body > div > div > div.message-data-right.macro {
  margin: auto;
  margin-left: 1%;
}

.gray-button {
  background-color: #5b5b5b;
  border: none;
  color: white;
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  font-family: Roboto-Medium;
  border-radius: 4px;
}

.chat-ul {
  width: 100%;
  list-style-type: none;
  padding: 18px 18px 3px 18px;
  position: absolute;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  top: 3.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #909296 #dee0e2;
  background-color: #f6f6f6;
  margin-bottom: 0%;
  border-bottom: 1px solid #c1c1c1;
}

.buttons-container button {
  margin-right: 10px;
  margin-bottom: 15px;
}

.entered-text {
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;
  background: #f6f6f6;
  color: #000000 !important;
  border-color: #c1c1c1;
}

.text, .user-text {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.text > p:first-of-type {
  width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  line-height: 13px;
  font-size: 13px;
}
.text > p {
  width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  line-height: 13px;
  font-size: 13px;
}
.text > p:last-of-type {
  width: 100%;
  text-align: right;
  margin-bottom: -2px;
  margin-top: auto;
}

.macro {
  margin-bottom: 15px;
  width: 85%;
  border-radius: 5px;
  padding: 7px;
  display: flex;
}

.send-message {
  border-radius: 0px;
  padding: 10px;
  display: flex;
}

#send {
  margin-left: 10px;
}

input:focus {
  outline: none;
}

button,
button:focus,
button:active {
  outline: none;
}

input::-moz-focus-inner {
  border: 0;
}

a {
  font-family: NHaasGroteskDSStd-55Rg;
  font-size: 13px;
  text-decoration: underline;
  color: #000000;
  display: inline;
}

@keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

On my Iphone, I am able to reproduce this issue. I have Android phone on which code is working fine. On PC also, I tested on different browsers all are working fine. Below are the images where it got reproduced on Iphone14.

In the second image 'Send' grey color button is cutoff when user tries to enter text. It seems when user tries to enter text, the page is getting enlarged on iphone. But not sure why it is happening only on IPhone and how to fix this issue. Can any one please let me know how to resolve the issue.

Answer 1

All your inputs should have this to avoid zoom

input { font-size: 16px; }

as a reference https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/

Answer 2

It seems there is a default minimum width on an input field - and that that isn't defined in the standard spec (is that true?) and different browsers may set different values.

I have managed to get the Send button cut off even using Edge on a Windows10 system (by dint of minimising the window width as far as the browser will allow and then getting it still smaller by invoking dev tools) so I don't think it's specifically an iPhone phenomenon, it just so happens that the other browsers/devices tried had enough room to put the default width input element and the button on the same line.

A solution may be to make your CSS a bit more responsive - not assuming that the input and button elements will fit side by side if the browser is using its default values. You could perhaps set widths in terms of vw units, or allow the Send button to move to the next line if there isn't room. Obviously you'd want to keep the input element at some reasonable width so the user can see what they have typed.