[templates/nextjs-sxa] The component aligment has been fixed #SXA-6539 (

#1950)

* CHANGELOG has been changed

* [templates/nextjs-sxa]: Styles of alignment has been fixed

* CHANGELOG has been changed

---------

Co-authored-by: Ruslan Matkovskyi <[email protected]>

CHANGELOG.md

@@ -22,6 +22,7 @@ Our versioning strategy is as follows:
 * `[sitecore-jss-angular]` Fix nested dynamic placeholders not being displayed in Pages ([#1947](https://github.com/Sitecore/jss/pull/1947))
 * `[sitecore-jss-nextjs]` Resolved an issue with Netlify where URL query parameters were being sorted, causing redirect failures. Added a method to generate all possible permutations of query parameters, ensuring proper matching with URL patterns regardless of their order. ([#1935](https://github.com/Sitecore/jss/pull/1935))
 * `[sitecore-jss-nextjs]` Fixed an issue with language-based redirects, ensuring users are correctly redirected to the appropriate language-specific pages rather than defaulting to the primary language. ([#1938](https://github.com/Sitecore/jss/pull/1938))
+* `[templates/nextjs-sxa]` Fix an alignment issue where components using both `me-auto` and `ms-md-auto` classes resulted in inconsistent alignment of elements. ([#1946](https://github.com/Sitecore/jss/pull/1946)) ([#1950](https://github.com/Sitecore/jss/pull/1950))
 
 ### 🎉 New Features & Improvements
 

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_alignment.scss

@@ -1,31 +1,85 @@
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+
 .position-left,
 .position-left * {
-    text-align: left !important;
+  text-align: left !important;
 }
 
 .position-right,
 .position-right * {
-    text-align: right !important;
+  text-align: right !important;
 }
 
 .position-center,
 .position-center * {
-    text-align: center !important;
+  text-align: center !important;
 }
 
 .position-left select {
-    direction: ltr !important;
+  direction: ltr !important;
 }
 
 .position-right select {
-    direction: rtl !important;
+  direction: rtl !important;
 }
 
 .position-center select {
-    text-align-last: center !important;
+  text-align-last: center !important;
+}
+
+@include media-breakpoint-up(sm) {
+  .ms-sm-auto {
+    margin-left: auto !important;
+    margin-right: 0 !important;
+  }
+  .me-sm-auto {
+    margin-right: auto !important;
+    margin-left: 0 !important;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .ms-md-auto {
+    margin-left: auto !important;
+    margin-right: 0 !important;
+  }
+  .me-md-auto {
+    margin-right: auto !important;
+    margin-left: 0 !important;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .ms-lg-auto {
+    margin-left: auto !important;
+    margin-right: 0 !important;
+  }
+  .me-lg-auto {
+    margin-right: auto !important;
+    margin-left: 0 !important;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .ms-xl-auto {
+    margin-left: auto !important;
+    margin-right: 0 !important;
+  }
+  .me-xl-auto {
+    margin-right: auto !important;
+    margin-left: 0 !important;
+  }
 }
 
-.ms-md-auto {
+@include media-breakpoint-up(xxl) {
+  .ms-xxl-auto {
     margin-left: auto !important;
     margin-right: 0 !important;
+  }
+  .me-xxl-auto {
+    margin-right: auto !important;
+    margin-left: 0 !important;
+  }
 }