Update SCSS to allow wrapping instead of truncating

This commit is contained in:
Rebecca Hsieh 2024-09-20 10:11:05 -07:00
parent 719ce00472
commit b36bd28978
No known key found for this signature in database
3 changed files with 9 additions and 8 deletions

View file

@ -931,9 +931,10 @@ ul.add-list-reset {
font-size: 14px;
}
.domain-name-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.domain-name-wrap {
white-space: normal; /* Allows wrapping */
word-wrap: break-word; /* Ensures that long words or URLs will break and wrap */
overflow: visible; /* Ensures no truncation */
word-break: break-all; /* Breaks words at any point if needed */
max-width: 100%; /* Adjust as necessary to limit the width */
}

View file

@ -9,7 +9,7 @@
<div class="grid-row grid-gap">
<div class="tablet:grid-col-3">
<p class="font-body-md margin-top-0 margin-bottom-2
text-primary-darker text-semibold domain-name-truncate"
text-primary-darker text-semibold domain-name-wrap"
>
<span class="usa-sr-only"> Domain name:</span> {{ domain.name }}
</p>

View file

@ -5,7 +5,7 @@
{% block domain_content %}
{{ block.super }}
<div class="margin-top-4 tablet:grid-col-10">
<h2 class="text-bold text-primary-dark">{{ domain.name }}</h2>
<h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
<div
class="usa-summary-box dotgov-status-box padding-bottom-0 margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"
role="region"