Chat: override box-sizing value on scrollable-content on ios to 'border-box' (#28425)

Author: nikkithelegendarypokemonster

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss

@@ -19,6 +19,7 @@
     &.dx-scrollable-native-ios {
       .dx-scrollable-content {
         min-height: 100%;
+        box-sizing: border-box;
       }
     }
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js

@@ -12,6 +12,7 @@ import {
 } from './chat.tests.js';
 import MessageGroup from '__internal/ui/chat/messagegroup';
 import TypingIndicator from '__internal/ui/chat/typingindicator';
+import devices from '__internal/core/m_devices';
 import localization from 'localization';
 import dateLocalization from 'localization/date';
 
@@ -28,6 +29,7 @@ const CHAT_LAST_MESSAGEGROUP_ALIGNMENT_END_CLASS = 'dx-chat-last-messagegroup-al
 const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
 const CHAT_TYPINGINDICATOR_CLASS = 'dx-chat-typingindicator';
 const SCROLLVIEW_REACHBOTTOM_INDICATOR = 'dx-scrollview-scrollbottom';
+const SCROLLABLE_CONTENT = 'dx-scrollable-content';
 
 const MS_IN_DAY = 86400000;
 
@@ -67,6 +69,17 @@ QUnit.module('MessageList', () => {
             assert.ok(this.instance instanceof MessageList);
         });
 
+        QUnit.test('scrollable content box-sizing value should be border-box', function(assert) {
+            if(devices.real().platform !== 'ios') {
+                assert.ok(true, 'test does not actual other than ios');
+                return;
+            }
+            const $scrollableContent = this.$element.find(`.${SCROLLABLE_CONTENT}`);
+            const scrollBoxSizing = $scrollableContent.css('box-sizing');
+
+            assert.strictEqual(scrollBoxSizing, 'border-box', 'scrollable content has right box-sizing value');
+        });
+
         QUnit.test('should not be any errors if the items contain undefined values', function(assert) {
             const items = [{}, undefined, {}];