Estoy presentando algunos datos en una cuadrícula. El problema es que no responde, cuando minimizo la página, la parte del área de texto desaparece y los botones de eliminar y editar también. ¿Cómo se puede resolver esto y también hacer que las columnas del área de texto se ajusten al contenido?

Componente principal

 <div className='container tbl' style={{marginTop:'20px'}}> {Object.entries(rules).map((rule) => ( <Rules key= {rule[0]} rules={rule} onLoad={getRules}/> ))} </div>

Componente hijo

 export default function Rules({rules, onLoad}:{rules:string[],onLoad:()=>void}) { return ( <div key={rules[0]} className='tbl_rules'> <div className='box-1'><h6>{rules[0]}</h6></div> <div ref={focusDiv} className='box-2'> <RulesText /> </div> <div className='box-3'> <button id={rules[0]} type="button" className="btn btn-sm btn-danger" onClick={onDeleteHandler} ><RiDeleteBin5Fill className='rules_icon'/>Delete</button> </div> <div className='box-4'> <button id={rules[0]} type="button" className="btn btn-sm btn-info" value={isEditing ? 'Save' : 'Edit'} onClick={onEditHandler} > <RiEdit2Fill className='rules_icon'/>{isEditing ? 'Save' : 'Edit'}</button> </div> </div> ) }

Componente hijo

 export default function RulesText({ruleText, readOnlyStatus}:{ruleText:string, readOnlyStatus:boolean) { const[textValue, setTextValue] = useState(ruleText) return ( <textarea rows={5} cols={50} readOnly={readOnlyStatus} value={textValue} /> ) }

CSS

 .tbl { background-color: rgb(255, 255, 255); color: rgba(0, 0, 0, 0.87); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px; margin-bottom: 30px; } [class^="box-"] { display: grid; place-items: center; margin: 10px; } .tbl_rules { display: grid; grid-template-columns: 150px 400px 100px 100px; border-bottom: 1px solid #80808059; } .rules_icon { margin-right: 2px; margin-bottom: 4px; }