Merge pull request #2825 from cisagov/rh/2016-overflow

#2016: Text wrapping to next line for an overflow in domain name - [RH]
cisagov · Sep 23, 2024 · 3614680 · 3614680
2 parents 5e0896d + 56a7cf6
commit 3614680
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
@@ -930,3 +930,11 @@ ul.add-list-reset {
 .dl-dja dt {
     font-size: 14px;
 }
+
+.domain-name-wrap {
+    white-space: normal;
+    word-wrap: break-word;
+    overflow: visible; 
+    word-break: break-all;
+    max-width: 100%; 
+  }
diff --git a/src/registrar/templates/domain_base.html b/src/registrar/templates/domain_base.html
@@ -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"
+                text-primary-darker text-semibold domain-name-wrap"
       >
         <span class="usa-sr-only"> Domain name:</span> {{ domain.name }}
       </p>

diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
@@ -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"