mobile quasar overlap

quasar.md

<q-page padding class="row justify-center">
    <div class="row justify-center full-height full-width text-center">
        <q-scroll-area style="width: 100%; height: 500px; margin-bottom: 80px; padding:20px;">

          <q-chat-message
            label='Sunday, 19th'
          />
            <q-chat-message
                name="me"
                :text="['hunter2']"
                stamp="4 minutes ago"
                sent
              />

            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />
            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />
            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />
            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />
            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />
            <q-chat-message
                name="me"
                :text="['hunter2']"
                stamp="4 minutes ago"
                sent
              />
              <q-chat-message
                  name="me"
                  :text="['hunter2']"
                  stamp="4 minutes ago"
                  sent
                />
            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />
            <q-chat-message
              name="Jane"
              :text="['hey, if you type in your pw', 'it will show as stars']"
              stamp="7 minutes ago"
            />

            <div id="container">

            </div>

        </q-scroll-area>




      <q-card>
        <q-page-sticky position="bottom">

        </q-page-sticky>
        <q-page-sticky expand position="bottom" style="margin-top:20px;">
          <div class="row" style="width:100%;border-top: 1px solid rgb(239, 239, 239); padding-top:10px;">
            <div class="col-xs-10">
              <div class="row">
                <div class="col-xs-10" style="padding-left:20px;">
                  <q-input type="textarea" placeholder="Type a message..." v-model="model" hide-underline />
                </div>
              </div>

            </div>
            <div class="col-xs-2"	style="padding-bottom:5px;">
              <q-btn color="primary" icon="send" />
            </div>
          </div>
        </q-page-sticky>
      </q-card>

    </div>

  </q-page>