Ensure (%fat) messages get rendered within screen bounds

This commit is contained in:
Fang 2019-07-29 02:01:16 +02:00
parent c880736eea
commit c04ee7a0de
No known key found for this signature in database
GPG Key ID: EB035760C1BBA972
2 changed files with 12 additions and 5 deletions

View File

@ -123,9 +123,14 @@ h2 {
-webkit-box-orient: vertical;
}
.clamp-message {
max-width: calc(100% - 32px - .5em);
}
.clamp-attachment {
overflow: scroll;
max-height: 10em;
max-width: 100%;
}
.lh-16 {

View File

@ -103,12 +103,14 @@ export class Message extends Component {
return this.renderAttachment(content.name.tac, content.name.nom);
}
return (<details open>
<summary class="inter fs-italic">{'Attached: ' + title}</summary>
return (<details>
<summary className="inter fs-italic">{'Attached: ' + title}</summary>
{ _.has(content, 'text')
? <pre class="clamp-attachment">{content.text}</pre>
? <pre className="clamp-attachment">{content.text}</pre>
: _.has(content, 'tank')
? content.tank.map(l => <p>{l}</p>)
? <div className="clamp-attachment">
{content.tank.map(l => <p className="mt2">{l}</p>)}
</div>
: null
}
</>);
@ -168,7 +170,7 @@ export class Message extends Component {
<div className="fl mr2">
<Sigil ship={props.msg.aut} size={36} />
</div>
<div className="fr" style={{ flexGrow: 1, marginTop: -8 }}>
<div className="fr clamp-message" style={{ flexGrow: 1, marginTop: -8 }}>
<div className="hide-child">
<p className="v-top label-small-mono gray dib mr3">
{this.renderAuthor()}