react bootstrap grouplist renders badly on mobile chrome - node.js

Question

i have a React App which worked fine, both on mobile and pc.
i am using 'react-bootstrap' listgroup and modal inside a material-ui tabs component.
it all worked fine until a few days ago on mobile the modal stopped rendering and the list items started to wrap instead of filling the entire witdh of the screen.
on pc chrome works fine, if i activate in VS Code chrome debugger the issue appears.
my code added below:
CatalogListItem.js
import React,{ Component } from 'react';
import {ListGroupItem} from 'react-bootstrap';
class CatalogListItem extends Component {
render() {
return (
<ListGroupItem bsStyle={(this.props.catalogItem.isCount)? null :"danger"}
align="right"
header={this.props.catalogItem.itemName + " - " + this.props.catalogItem.measureId.measureName}
onClick={() => {this.props.onClickHandler(this.props.catalogItem)}}
>
<img src={this.props.catalogItem.itemPicPath}
height="70" width="70" alt="item" align="left" />
<br/>
<span align="right">
מלאי קבוע: {this.props.catalogItem.itemStock} ,
מחיר: {this.props.catalogItem.itemPrice[0].price} ש"ח
פיקדון: {this.props.catalogItem.itemDeposit} ש"ח
<br/>
הנחה: {this.props.catalogItem.itemDiscount}%,
הנחה צוברת: {this.props.catalogItem.additionalDiscount}%
</span>
</ListGroupItem>
);
}
}
export default CatalogListItem;
CatalogTabs.js
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import React,{Component} from 'react';
import {Tabs,Tab} from 'material-ui/Tabs';
import {List} from 'material-ui/List';
import PropTypes from 'prop-types';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import CatalogListItem from '../catalogPage/CatalogListItem';
import CatalogItemFormModal from './CatalogItemFormModal';
// eslint-disable-next-line
const propTypes = {
//tabsTitles: PropTypes.object.isRequired,
pathName: PropTypes.string.isRequired
};
const fabStyle = {
bottom: 20,
left: 10,
position: 'fixed'
};
const emptyCatalogItem = {
"itemId": "",
"itemName": "",
"supplierId": {},
"measureId": {},
"itemStock": 0,
"itemPrice": [{price:0}],
"itemDeposit": 0,
"itemDiscount": 0,
"additionalDiscount": 0,
"itemPicPath": "http://freevector.co/wp-content/uploads/2012/04/70626-label-
beer-bottle.png",
"isCount": true
}
class CatalogTabs extends Component {
constructor(props) {
super(props);
this.state = {focusedCatalogItem:emptyCatalogItem,
showModal:false};
}
showModal(catalogItem){
this.setState({focusedCatalogItem:JSON.parse(JSON.stringify(catalogItem))});
this.setState({showModal: true});
}
hideModal(){
this.setState({showModal: false});
}
Listitemsfactory(supplier){
return(
<div>
{ this.props.catalogData.catalog
.sort((a, b) => a.itemName.localeCompare(b.itemName))
.map((catalogItem)=> {
if (supplier._id === catalogItem.supplierId._id)
return <CatalogListItem key={catalogItem._id}
catalogItem={catalogItem}
onClickHandler=
{this.showModal.bind(this)} />
return false;
}
)}
</div>);
}
render(){
return(
<div>
<MuiThemeProvider>
<Tabs>
{this.props.suppliersData.suppliers.map((supplier)=>
<Tab label={(supplier.supplierName.length > 6)?
supplier.supplierName.substring(0,6)+"..."
:
supplier.supplierName}
key={supplier._id}>
<List>
{this.Listitemsfactory(supplier)}
</List>
</Tab>
)}
</Tabs>
<FloatingActionButton onClick={()=>this.showModal(emptyCatalogItem)}
style={fabStyle}>
<ContentAdd/>
</FloatingActionButton>
</MuiThemeProvider>
<CatalogItemFormModal
suppliers={this.props.suppliersData.suppliers}
measures={this.props.measuresData}
heading={"פרטי פריט"}
onItemNameChange={this.onItemNameChange.bind(this)}
onItemSupplierChange={this.onItemSupplierChange.bind(this)}
onItemMeasureChange={this.onItemMeasureChange.bind(this)}
onItemPriceChange={this.onItemPriceChange.bind(this)}
onItemDepositChange={this.onItemDepositChange.bind(this)}
onItemDiscountChange={this.onItemDiscountChange.bind(this)}
onAdditionalDiscountChange={this.onAdditionalDiscountChange.bind(this)}
onItemStockChange={this.onItemStockChange.bind(this)}
onIsCountChange={this.onIsCountChange.bind(this)}
onItemDelete={this.startDeleteItem.bind(this)}
itemData = {this.state.focusedCatalogItem}
showModal={this.state.showModal}
onHide={this.hideModal.bind(this)}
onOk={this.startUpdateItem.bind(this)}/>
</div>
);}
onItemNameChange(event,newValue){
let item = this.state.focusedCatalogItem;
item.itemName = newValue;
this.setState({focusedCatalogItem:item});
}
onItemSupplierChange(event, key, payload){
let item = this.state.focusedCatalogItem;
item.supplierId._id = payload;
this.setState({focusedCatalogItem:item});
}
onItemMeasureChange(event,key,payload){
let item = this.state.focusedCatalogItem;
item.measureId._id = payload;
this.setState({focusedCatalogItem:item});
}
onItemPriceChange(event,newValue){
let item = this.state.focusedCatalogItem;
item.itemPrice = newValue;
this.setState({focusedCatalogItem:item});
}
onItemDepositChange(event,newValue){
let item = this.state.focusedCatalogItem;
item.itemDeposit = newValue;
this.setState({focusedCatalogItem:item});
}
onItemDiscountChange(event,newValue){
let item = this.state.focusedCatalogItem;
item.itemDiscount = newValue;
this.setState({focusedCatalogItem:item});
}
onAdditionalDiscountChange(event,newValue){
let item = this.state.focusedCatalogItem;
item.additionalDiscount = newValue;
this.setState({focusedCatalogItem:item});
}
onItemStockChange(event,newValue){
let item = this.state.focusedCatalogItem;
item.itemStock = newValue;
this.setState({focusedCatalogItem:item});
}
onIsCountChange(isInputChecked){
let item = this.state.focusedCatalogItem;
item.isCount = isInputChecked;
this.setState({focusedCatalogItem:item});
}
startUpdateItem(catalogItem){
console.log("item that is sent to server:" +
JSON.stringify(catalogItem));
let catalogForSend = JSON.parse(JSON.stringify(catalogItem));
catalogForSend.supplierId = catalogItem.supplierId._id;
catalogForSend.measureId = catalogItem.measureId._id;
console.log("item that is sent to server:" +
JSON.stringify(catalogForSend));
this.props.updateCatalogItem(catalogForSend);
}
startDeleteItem(catalogItem){
this.props.deleteCatalogItem(catalogItem);
}
}
export default CatalogTabs;
CatalogPage.js
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect,} from 'react-redux';
import { ToastContainer } from 'react-toastify';
import Header from '../common/Header';
import CatalogTabs from './CatalogTabs';
import LoadingIndicator from '../common/Loading';
import {setFocusedCatalogItem,updateCatalogItem,deleteCatalogItem} from
'../../store/actions/catalogActions'
// this class detirme what page to display - cataloglist or an item form
// this is decided by the url - if provided an item id or not
class CatalogPage extends Component {
render() {
return (
<div>
<Header pageTitle="קטלוג"
isUserLoggedIn = {this.props.userData.isUserLoggedIn}/>
<CatalogTabs
pathName={this.props.location.pathname}
catalogData = {this.props.catalogData}
suppliersData = {this.props.suppliersData}
measuresData = {this.props.measuresData.measures}
userData = {this.props.userData}
setFocusedCatalogItem={this.props.setFocusedCatalogItem}
updateCatalogItem={this.props.updateCatalogItem}
deleteCatalogItem={this.props.deleteCatalogItem}/>
<LoadingIndicator isLoading =
{this.props.catalogData.fetchingCatalogData}/>
<ToastContainer/>
</div>
);
}
}
function mapStateToProps(state){
return{
userData: state.userData,
catalogData: state.catalogData,
suppliersData: state.suppliersData,
measuresData: state.measuresData
}
}
function matchDispachToProps(dispatch){
return bindActionCreators({setFocusedCatalogItem:setFocusedCatalogItem,
updateCatalogItem:updateCatalogItem,
deleteCatalogItem:deleteCatalogItem},dispatch)
}
export default connect(mapStateToProps,matchDispachToProps)(CatalogPage);