Wrapping issues.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3996 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
2022-10-05 02:11:46 +00:00
parent 25cc3d7c3a
commit e5dcff0200
6 changed files with 12 additions and 7 deletions

View File

@ -34,7 +34,7 @@ class TfIdentityPickerElement extends LitElement {
render() {
return html`
<select @change=${this.changed}>
<select @change=${this.changed} style="max-width: 100%">
${this.ids.map(id => html`<option ?selected=${id == this.selected}>${id}</option>`)}
</select>
`;

View File

@ -180,7 +180,7 @@ class TfMessageElement extends LitElement {
}
if (this.message.placeholder) {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
${this.message.id} (placeholder)
<div>${this.render_votes()}</div>
${(this.message.child_messages || []).map(x => html`
@ -229,6 +229,9 @@ class TfMessageElement extends LitElement {
white-space: pre-wrap;
overflow-wrap: break-word;
}
div {
overflow-wrap: anywhere;
}
img {
max-width: 100%;
height: auto;

View File

@ -154,7 +154,9 @@ class TfNewsElement extends LitElement {
messages_by_id = this.process_messages(placeholders, messages_by_id);
let final_messages = this.finalize_messages(messages_by_id);
return html`
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>`)}
<div style="display: flex; flex-direction: column">
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>`)}
</div>
`;
}

View File

@ -14,7 +14,7 @@ a:hover {
}
img {
max-width: 640px;
max-height: 480px;
max-width: min(640px, 100%);
max-height: min(480px, auto);
}
`;

View File

@ -29,7 +29,7 @@ class TfUserElement extends LitElement {
</div>`;
} else {
return html`
<div style="display: inline-block; font-weight: bold">
<div style="display: inline-block; font-weight: bold; word-wrap: anywhere">
<a target="_top" href=${'#' + this.id}>${this.id}</a>
</div>`;
}