From d2e75868089b0be97dc2caf850a90fdb1c6072ee Mon Sep 17 00:00:00 2001
From: Eli Selkin <eli.j.selkin@gmail.com>
Date: Fri, 27 Sep 2024 11:34:58 -0700
Subject: [PATCH] vads-u only replace for screensize breakpoints (#32128)

Co-authored-by: Eli Selkin <eli@eliselkin.com>
---
 .../static-pages/facilities/BasicFacilityListWidget.jsx         | 2 +-
 .../static-pages/facilities/FacilityDetailWidget.jsx            | 2 +-
 src/applications/static-pages/facilities/FacilityListWidget.jsx | 2 +-
 .../static-pages/facilities/OtherFacilityListWidget.jsx         | 2 +-
 .../static-pages/facilities/vet-center/NearByVetCenters.jsx     | 2 +-
 .../facilities/vet-center/components/VAFAcility.jsx             | 2 +-
 src/applications/static-pages/facilities/vetCentersHours.jsx    | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/applications/static-pages/facilities/BasicFacilityListWidget.jsx b/src/applications/static-pages/facilities/BasicFacilityListWidget.jsx
index db3c1478e642..b206cb66cf74 100644
--- a/src/applications/static-pages/facilities/BasicFacilityListWidget.jsx
+++ b/src/applications/static-pages/facilities/BasicFacilityListWidget.jsx
@@ -59,7 +59,7 @@ export default class BasicFacilityListWidget extends React.Component {
             <FacilityAddress facility={facility} />
             <FacilityPhone facility={facility} />
           </section>
-          <section className="region-grid vads-u-order--first small-screen:vads-u-order--initial vads-u-margin-bottom--2">
+          <section className="region-grid vads-u-order--first mobile-lg:vads-u-order--initial vads-u-margin-bottom--2">
             <a
               href={this.props.facilities[facility.id].entityUrl.path}
               aria-label={this.props.facilities[facility.id].nickname}
diff --git a/src/applications/static-pages/facilities/FacilityDetailWidget.jsx b/src/applications/static-pages/facilities/FacilityDetailWidget.jsx
index c447b477fef4..10ffb16230cd 100644
--- a/src/applications/static-pages/facilities/FacilityDetailWidget.jsx
+++ b/src/applications/static-pages/facilities/FacilityDetailWidget.jsx
@@ -48,7 +48,7 @@ export function FacilityDetailWidget({ loading, error, facility }) {
               Clinical hours
             </h3>
             <div className="vads-u-display--flex vads-u-flex-direction--column mobile-lg:vads-u-flex-direction--row vads-u-margin-bottom--0">
-              <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 small-screen:vads-u-margin-bottom--0 vads-u-margin-right--3">
+              <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 mobile-lg:vads-u-margin-bottom--0 vads-u-margin-right--3">
                 {clinicalHours.slice(0, CLINICAL_HOURS_COLUMN_MODIFIER)}
               </ul>
               <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 'vads-u-margin-bottom--0">
diff --git a/src/applications/static-pages/facilities/FacilityListWidget.jsx b/src/applications/static-pages/facilities/FacilityListWidget.jsx
index 82bd9077f856..76fc0f0e667e 100644
--- a/src/applications/static-pages/facilities/FacilityListWidget.jsx
+++ b/src/applications/static-pages/facilities/FacilityListWidget.jsx
@@ -63,7 +63,7 @@ export default class FacilityListWidget extends React.Component {
             <FacilityPhone facility={facility} />
           </section>
           {this.props.facilities[facility.id].derivative && (
-            <section className="region-grid usa-width-one-half vads-u-order--first small-screen:vads-u-order--initial vads-u-margin-bottom--2">
+            <section className="region-grid usa-width-one-half vads-u-order--first mobile-lg:vads-u-order--initial vads-u-margin-bottom--2">
               <a
                 href={this.props.facilities[facility.id].entityUrl.path}
                 aria-label={this.props.facilities[facility.id].nickname}
diff --git a/src/applications/static-pages/facilities/OtherFacilityListWidget.jsx b/src/applications/static-pages/facilities/OtherFacilityListWidget.jsx
index ad53a179ae9d..fd819863721d 100644
--- a/src/applications/static-pages/facilities/OtherFacilityListWidget.jsx
+++ b/src/applications/static-pages/facilities/OtherFacilityListWidget.jsx
@@ -66,7 +66,7 @@ export default class OtherFacilityListWidget extends React.Component {
         return (
           <div
             key={facility.id}
-            className="region-list usa-width-one-whole vads-u-display--flex vads-u-flex-direction--column mobile-lg:vads-u-flex-direction--row facility vads-u-margin-bottom--2p5 small-screen:vads-u-margin-bottom--4 medium-screen:vads-u-margin-bottom--5"
+            className="region-list usa-width-one-whole vads-u-display--flex vads-u-flex-direction--column mobile-lg:vads-u-flex-direction--row facility vads-u-margin-bottom--2p5 mobile-lg:vads-u-margin-bottom--4 medium-screen:vads-u-margin-bottom--5"
           >
             <section key={facility.id} className="usa-width-one-half">
               <h3 className="vads-u-margin-bottom--1 vads-u-font-size--md medium-screen:vads-u-font-size--lg">
diff --git a/src/applications/static-pages/facilities/vet-center/NearByVetCenters.jsx b/src/applications/static-pages/facilities/vet-center/NearByVetCenters.jsx
index 6f263e9e15f8..0960a5264266 100644
--- a/src/applications/static-pages/facilities/vet-center/NearByVetCenters.jsx
+++ b/src/applications/static-pages/facilities/vet-center/NearByVetCenters.jsx
@@ -158,7 +158,7 @@ const NearByVetCenters = props => {
 
         {vetCenter.fieldMedia && (
           <section
-            className="region-grid usa-width-one-half vads-u-order--first small-screen:vads-u-order--initial
+            className="region-grid usa-width-one-half vads-u-order--first mobile-lg:vads-u-order--initial
         vads-u-margin-bottom--2"
           >
             <VetCenterImageSection vetCenter={vetCenter} />
diff --git a/src/applications/static-pages/facilities/vet-center/components/VAFAcility.jsx b/src/applications/static-pages/facilities/vet-center/components/VAFAcility.jsx
index 80065092b012..a16daf06c565 100644
--- a/src/applications/static-pages/facilities/vet-center/components/VAFAcility.jsx
+++ b/src/applications/static-pages/facilities/vet-center/components/VAFAcility.jsx
@@ -18,7 +18,7 @@ const VAFacility = props => {
 
       {vaFacility.fieldMedia && (
         <section
-          className="region-grid usa-width-one-half vads-u-order--first small-screen:vads-u-order--initial
+          className="region-grid usa-width-one-half vads-u-order--first mobile-lg:vads-u-order--initial
         vads-u-margin-bottom--2"
         >
           <VetCenterImageSection vetCenter={vaFacility} />
diff --git a/src/applications/static-pages/facilities/vetCentersHours.jsx b/src/applications/static-pages/facilities/vetCentersHours.jsx
index ab2ca85c7914..9e625aa71c40 100644
--- a/src/applications/static-pages/facilities/vetCentersHours.jsx
+++ b/src/applications/static-pages/facilities/vetCentersHours.jsx
@@ -57,7 +57,7 @@ const VetCenterHours = props => {
     ));
 
     return (
-      <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 small-screen:vads-u-margin-bottom--0 vads-u-margin-right--3">
+      <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 mobile-lg:vads-u-margin-bottom--0 vads-u-margin-right--3">
         {hoursListItems}
       </ul>
     );