grid-template-columns not respected in Safari 13 - css

Question

I'm having an issue where the grid columns in my React component are showing up on separate rows in Safari 13. Numerous Google searches have come up with nothing and I'm really hoping somebody here can help. Here is the code of my React component (I've left out a bunch of state stuff and functions that aren't relevant):
import React, { useState, useRef } from 'react'
import classNames from 'classnames'
import SlideToggle from 'react-slide-toggle'
import styles from './shoppingListItem.module.css'
const ShoppingListItem = ({
itemId,
listTitle,
canEdit,
description,
quantity,
notes
}) => {
const [currentQuantity, setCurrentQuantity] = useState(quantity)
return(
<div className={styles.root}>
<button className={styles.button} onClick={toggleDetails}>
<span ref={headerRef} className={classNames(styles.header, { [styles.headerEditable]: canEdit })}>
{canEdit &&
<span className={styles.editIcons} ref={iconsRef}>
<div className={styles.icon} ref={deleteRef} onClick={destroyItem}><FontAwesomeIcon className={classNames(styles.fa, styles.destroyIcon
)} icon={faTimes} /></div>
<div className={styles.icon} ref={editRef} onClick={showEditForm}><FontAwesomeIcon className={styles.fa} icon={faEdit} /></div>
</span>}
<h4 className={styles.description}>{description}</h4>
</span>
<span className={styles.quantity}>
{canEdit && <div className={styles.icon} ref={incRef} onClick={incrementQuantity}>
<FontAwesomeIcon className={styles.fa} icon={faAngleUp} />
</div>}
<div className={styles.quantityContent}>
{currentQuantity}
</div>
{canEdit && <div className={styles.icon} ref={decRef} onClick={decrementQuantity}>
<FontAwesomeIcon className={styles.fa} icon={faAngleDown} />
</div>}
</span>
</button>
<SlideToggle toggleEvent={toggleEvent} collapsed>
{({ setCollapsibleElement }) => (
<div className={styles.collapsible} ref={setCollapsibleElement}>
<p className={styles.notes}>{notes || 'No details available'}</p>
</div>
)}
</SlideToggle>
</div>
)
}
The relevant CSS is:
.root {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
background-color: var(--main-color);
border-bottom: 1px solid var(--border-color);
}
.root:hover {
background-color: var(--hover-color);
}
.button {
width: 100%;
background: none;
border: none;
border-bottom: 1px solid var(--border-color);
text-align: left;
cursor: pointer;
padding: 0;
display: grid;
grid-template-columns: 2fr 1fr;
}
.fa {
color: var(--title-text-color);
}
.destroyIcon {
margin-right: 8px;
}
.header {
display: inline-block;
padding: 32px 16px;
border-right: 1px solid var(--border-color);
}
.headerEditable {
display: flex;
align-items: flex-start;
}
.editIcons {
display: flex;
flex-direction: row;
margin: auto 12px auto 0;
}
.quantity {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1rem;
color: var(--title-text-color);
display: inline-block;
margin: auto 0;
padding: 32px 8px;
display: flex;
justify-content: space-between;
}
.quantityContent {
margin: auto;
}
.icon {
display: inline-block;
padding: 4px;
cursor: pointer;
}
.description {
display: inline-block;
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1.025rem;
color: var(--title-text-color);
margin: auto 0;
line-height: 1.25;
}
This is what the list item .button element/its children look like in Chrome (i.e., the way it's supposed to look):
This is the way the element looks in Safari (i.e., how it's not supposed to look):

Answer 1

The issue here turned out to be that I was using the button element incorrectly as the slide-toggle trigger and Chrome didn't mind but Safari didn't like it. I had made it a button because of accessibility reasons but I guess that was the wrong way to go. Changing the slide-toggle trigger into a div made it look the same in both Chrome and Safari.