feat: use span to properly truncate text inside button
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user