vads-u only replace for screensize breakpoints (#32128)

Co-authored-by: Eli Selkin <eli@eliselkin.com>
department-of-veterans-affairs · Sep 27, 2024 · d2e7586 · d2e7586
1 parent 40c0dab
commit d2e7586
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
     );