Don't wrap concordance results in multiple lines.

This commit is contained in:
2023-01-18 13:11:08 +01:00
parent b000f2225c
commit 691196ebf1
2 changed files with 22 additions and 2 deletions
@@ -6,8 +6,8 @@ const ConcordanceListItem = (props) => {
return ( return (
<> <>
<div className={`row ${styles.item}`} onClick={() => { props.toggleDetails(props.index) }}> <div className={`row ${styles.item}`} onClick={() => { props.toggleDetails(props.index) }}>
<div className='col text-end'><ConcordanceTokens tokens={props.item.leftContext} />&nbsp;</div> <div className={`col ${styles.left}`}><span><ConcordanceTokens tokens={props.item.leftContext} />&nbsp;</span></div>
<div className='col'><ConcordanceTokens tokens={[props.item.centerContext]} /> <ConcordanceTokens tokens={props.item.rightContext} /></div> <div className={`col ${styles.right}`}><ConcordanceTokens tokens={[props.item.centerContext]} /> <ConcordanceTokens tokens={props.item.rightContext} /></div>
</div> </div>
{props.expanded && <ConcordanceDetails paragraphId={props.item.paragraphId} tokenOrder={props.item.centerContext.tokenOrder} onClose={() => { props.toggleDetails(null) }} />} {props.expanded && <ConcordanceDetails paragraphId={props.item.paragraphId} tokenOrder={props.item.centerContext.tokenOrder} onClose={() => { props.toggleDetails(null) }} />}
</> </>
@@ -5,4 +5,24 @@
cursor: pointer; cursor: pointer;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
:global(.col) {
&.left,
&.right {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
&.left {
span {
display: inline-block;
float: right;
min-width: 100%;
overflow: visible;
text-align: right;
}
}
}
} }