From 6cb5b9bd6da6d2b908d6ec08c75cd6b2949e1399 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Sun, 22 Mar 2026 17:56:46 +0000
Subject: [PATCH 1/4] refactor(Container): migrate from SCSS to Tailwind CSS

---
 src/components/Container/Container.jsx  | 8 ++++++--
 src/components/Container/Container.scss | 9 ---------
 2 files changed, 6 insertions(+), 11 deletions(-)
 delete mode 100644 src/components/Container/Container.scss

diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx
index 25e070c9b917..3e7fa7b26f16 100644
--- a/src/components/Container/Container.jsx
+++ b/src/components/Container/Container.jsx
@@ -1,11 +1,15 @@
 import PropTypes from "prop-types";
 
-import "./Container.scss";
+// Tailwind CSS is now used for styling. Custom SCSS removed.
 
 export default function Container(props = {}) {
   const { className = "" } = props;
 
-  return <div className={`container ${className}`}>{props.children}</div>;
+  return (
+    <div className={`w-full max-w-[1024px] mx-auto ${className}`}>
+      {props.children}
+    </div>
+  );
 }
 
 Container.propTypes = {
diff --git a/src/components/Container/Container.scss b/src/components/Container/Container.scss
deleted file mode 100644
index d6a533edbb1b..000000000000
--- a/src/components/Container/Container.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/mixins" as *;
-@use "sass:map";
-
-.container {
-  width: 100%;
-  max-width: map.get($screens, large);
-  margin: 0 auto;
-}

From ae037736f569a9a3eeb6a827d7db353e598b93c7 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:09:34 +0000
Subject: [PATCH 2/4] test(Container): update snapshots after Tailwind
 migration

---
 .../Container/__snapshots__/Container.test.jsx.snap           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Container/__snapshots__/Container.test.jsx.snap b/src/components/Container/__snapshots__/Container.test.jsx.snap
index 389c2266dbb6..1d878b2fcb7d 100644
--- a/src/components/Container/__snapshots__/Container.test.jsx.snap
+++ b/src/components/Container/__snapshots__/Container.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly with children and className 1`] = `
 <div
-  class="container test-class"
+  class="w-full max-w-[1024px] mx-auto test-class"
 >
   <p>
     Child content
@@ -12,7 +12,7 @@ exports[`Container renders correctly with children and className 1`] = `
 
 exports[`Container renders correctly without className 1`] = `
 <div
-  class="container "
+  class="w-full max-w-[1024px] mx-auto "
 >
   <span>
     Simple child

From 42c12fa4f1e64cda589089ee828ce735f0e7b7ef Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Mon, 23 Mar 2026 13:37:30 +0000
Subject: [PATCH 3/4] refactor(Container): replace hardcoded max-width with
 Tailwind utility

---
 src/components/Container/Container.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx
index 3e7fa7b26f16..d468a8b88438 100644
--- a/src/components/Container/Container.jsx
+++ b/src/components/Container/Container.jsx
@@ -6,7 +6,7 @@ export default function Container(props = {}) {
   const { className = "" } = props;
 
   return (
-    <div className={`w-full max-w-[1024px] mx-auto ${className}`}>
+    <div className={`w-full max-w-screen-lg mx-auto ${className}`}>
       {props.children}
     </div>
   );

From b2fb657eb82ae309ff35387dce3fd3c1f99e1856 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Mon, 23 Mar 2026 13:43:23 +0000
Subject: [PATCH 4/4] test(Container): update snapshots after Tailwind change

---
 .../Container/__snapshots__/Container.test.jsx.snap           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Container/__snapshots__/Container.test.jsx.snap b/src/components/Container/__snapshots__/Container.test.jsx.snap
index 1d878b2fcb7d..332bbb71e45c 100644
--- a/src/components/Container/__snapshots__/Container.test.jsx.snap
+++ b/src/components/Container/__snapshots__/Container.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly with children and className 1`] = `
 <div
-  class="w-full max-w-[1024px] mx-auto test-class"
+  class="w-full max-w-screen-lg mx-auto test-class"
 >
   <p>
     Child content
@@ -12,7 +12,7 @@ exports[`Container renders correctly with children and className 1`] = `
 
 exports[`Container renders correctly without className 1`] = `
 <div
-  class="w-full max-w-[1024px] mx-auto "
+  class="w-full max-w-screen-lg mx-auto "
 >
   <span>
     Simple child