Fix long domains overflowing post-meta (#182).

In submissions and submission_listings, long domains would overflow
the container and generally break everything. Fixed in the template
by truncating the outputted text length and in the frontend by
enforcing a maximum width on the element.
This commit is contained in:
TLSM 2022-08-17 01:52:38 -04:00
parent 345ef7b5e7
commit f1983da8d4
No known key found for this signature in database
GPG key ID: E745A82778055C7E
3 changed files with 11 additions and 2 deletions

View file

@ -3311,6 +3311,15 @@ small, .small {
font-size: 12px;
width: fit-content;
}
.post-meta-domain {
/* fixes very long domains overflowing submission_listing */
display: inline-block;
max-width: 20em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
#frontpage .posts .card .card-footer, #userpage .posts .card .card-footer, #thread .card .card-footer, #search .posts .card .card-footer {
border: 0;
background-color: transparent;

View file

@ -192,7 +192,7 @@
{% endif %}
<span data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp" onmouseover="timestamp('timestamp','{{p.created_utc}}')">&nbsp;{{p.age_string}}</span>
({% if p.is_image %}image post{% elif p.is_video %}video post{% elif p.domain %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>{{p.domain}}</a>{% else %}text post{% endif %})
({% if p.is_image %}image post{% elif p.is_video %}video post{% elif p.domain %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" class="post-meta-domain" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>{{p.domain|truncate(35, True)}}</a>{% else %}text post{% endif %})
{% if p.edited_utc %}
&nbsp;&nbsp;Edited <span data-bs-toggle="tooltip" data-bs-placement="bottom" onmouseover="timestamp('edited_timestamp','{{p.edited_utc}}')" id="edited_timestamp">{{p.edited_string}}</span>

View file

@ -230,7 +230,7 @@
{% endif %}
&nbsp;
({% if p.is_image %}image post{% elif p.is_video %}video post{% elif p.domain %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" {% if v and v.newtab and not g.webview %}target="_blank"{% endif %}>{{p.domain}}</a>{% else %}text post{% endif %})
({% if p.is_image %}image post{% elif p.is_video %}video post{% elif p.domain %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" class="post-meta-domain" {% if v and v.newtab and not g.webview %}target="_blank"{% endif %}>{{p.domain|truncate(35, True)}}</a>{% else %}text post{% endif %})
{% if p.edited_utc %}
&nbsp;&nbsp;Edited <span data-bs-toggle="tooltip" data-bs-placement="bottom" id="edited_timestamp-{{p.id}}" onmouseover="timestamp('edited_timestamp-{{p.id}}','{{p.edited_utc}}')">{{p.edited_string}}</span>
{% endif %}