From c8c5fc8134a07b80e85f117a67cc0de874a81d84 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:19:39 -0700
Subject: [PATCH] CSS change

---
 src/registrar/assets/sass/_theme/_base.scss |  2 +-
 src/registrar/templates/home.html           | 36 ++++++++++-----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index 347b132a3..0a62009e7 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -139,7 +139,7 @@ abbr[title] {
   }
 }
 
-@media (tablet) {
+@include at-media(tablet) {
   .usa-tooltip__body {
     width: 250px;
     white-space: normal;
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index 699a82c61..0747c9985 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -48,25 +48,23 @@
           </th>
           <td data-sort-value="{{ domain.expiration_date|date:"U" }}" data-label="Expires">{{ domain.expiration_date|date }}</td>
           <td data-label="Status">
-            <span>
-              {# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
-              {% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
-                  Expired
-              {% elif domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %}
-                  DNS needed
-              {% else %}
-                  {{ domain.state|capfirst }}
-              {% endif %}
-              <svg 
-                class="usa-icon usa-tooltip text-middle margin-bottom-05 text-accent-cool no-click-outline-and-cursor-help" 
-                role="img" 
-                data-position="top"
-                title="{{domain.get_state_help_text}}"
-                focusable="true"
-              >
-                <use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
-              </svg>
-            </span>
+            {# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
+            {% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
+                Expired
+            {% elif domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %}
+                DNS needed
+            {% else %}
+                {{ domain.state|capfirst }}
+            {% endif %}
+            <svg 
+              class="usa-icon usa-tooltip text-middle margin-bottom-05 text-accent-cool no-click-outline-and-cursor-help" 
+              role="img" 
+              data-position="top"
+              title="{{domain.get_state_help_text}}"
+              focusable="true"
+            >
+              <use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
+            </svg>
           </td>
           <td>
             <a href="{% url "domain" pk=domain.pk %}">