feat: use span to properly truncate text inside button

This commit is contained in:
karishmas6
2024-08-21 22:32:04 +05:30
parent 947a3d734b
commit 0078b869df

View File

@@ -234,35 +234,45 @@ export const BrowserWindow = () => {
return ( return (
<div onClick={handleClick}> <div onClick={handleClick}>
{ {
getText === true || getList === true ? ( getText === true || getList === true ? (
<GenericModal <GenericModal
isOpen={showAttributeModal} isOpen={showAttributeModal}
onClose={() => { }} onClose={() => { }}
canBeClosed={false} canBeClosed={false}
> >
<div> <div>
<h2>Select Attribute</h2> <h2>Select Attribute</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
{attributeOptions.map((option) => ( {attributeOptions.map((option) => (
<Button <Button
variant="outlined" variant="outlined"
size="medium" size="medium"
key={option.value} key={option.value}
onClick={() => handleAttributeSelection(option.value)} onClick={() => handleAttributeSelection(option.value)}
style={{ style={{
justifyContent: 'flex-start', whiteSpace: 'nowrap', justifyContent: 'flex-start',
overflow: 'hidden', maxWidth: '200px',
textOverflow: 'ellipsis' overflow: 'hidden',
}} padding: '5px 10px',
> }}
{option.label} >
</Button> <span style={{
))} display: 'block',
</div> whiteSpace: 'nowrap',
</div> overflow: 'hidden',
</GenericModal> textOverflow: 'ellipsis',
) : null maxWidth: '100%'
} }}>
{option.label}
</span>
</Button>
))}
</div>
</div>
</GenericModal>
) : null
}
{((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
<Highlighter <Highlighter