From 7a0b7b8733034e315e53563cce7f736acc9b30ec Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 10 Dec 2025 07:26:12 -0800
Subject: [PATCH] refactor(client): remove hasEditableBoundaries from learn
 wrapper (#64453)

---
 client/src/components/layouts/learn.tsx               | 11 ++---------
 client/src/templates/Challenges/classic/classic.css   |  4 +---
 .../templates/Challenges/classic/mobile-layout.tsx    |  1 +
 client/src/templates/Challenges/classic/show.tsx      |  2 +-
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/client/src/components/layouts/learn.tsx b/client/src/components/layouts/learn.tsx
index c0728d4af95..ea79fa52c58 100644
--- a/client/src/components/layouts/learn.tsx
+++ b/client/src/components/layouts/learn.tsx
@@ -33,14 +33,12 @@ type LearnLayoutProps = {
   fetchState: FetchState;
   tryToShowDonationModal: () => void;
   children?: React.ReactNode;
-  hasEditableBoundaries?: boolean;
 };
 
 function LearnLayout({
   fetchState,
   tryToShowDonationModal,
-  children,
-  hasEditableBoundaries
+  children
 }: LearnLayoutProps): JSX.Element {
   useEffect(() => {
     tryToShowDonationModal();
@@ -65,12 +63,7 @@ function LearnLayout({
       <Helmet>
         <meta content='noindex' name='robots' />
       </Helmet>
-      <main
-        id='learn-app-wrapper'
-        {...(hasEditableBoundaries && { 'data-has-editable-boundaries': true })}
-      >
-        {children}
-      </main>
+      <main id='learn-app-wrapper'>{children}</main>
       <DonateModal />
     </>
   );
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index c2204b06cc0..b7206c43adc 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -197,9 +197,7 @@
   flex-direction: column;
 }
 
-#learn-app-wrapper[data-has-editable-boundaries='true']
-  #mobile-layout
-  .tab-content[data-state='active'] {
+#mobile-layout.has-editable-boundaries .tab-content[data-state='active'] {
   padding-block-end: 0px;
 }
 
diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx
index fb9b41b5faa..9c2b3eff6e4 100644
--- a/client/src/templates/Challenges/classic/mobile-layout.tsx
+++ b/client/src/templates/Challenges/classic/mobile-layout.tsx
@@ -213,6 +213,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
       <>
         <Tabs
           id='mobile-layout'
+          className={hasEditableBoundaries ? 'has-editable-boundaries' : ''}
           onKeyDown={this.handleKeyDown}
           onMouseDown={this.handleClick}
           onTouchStart={this.handleClick}
diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
index 8aa05a35e01..f18c22e8597 100644
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/client/src/templates/Challenges/classic/show.tsx
@@ -471,7 +471,7 @@ function ShowClassic({
       usesMultifileEditor={usesMultifileEditor}
       editorRef={editorRef}
     >
-      <LearnLayout hasEditableBoundaries={hasEditableBoundaries}>
+      <LearnLayout>
         <Helmet title={windowTitle} />
         {isMobile && (
           <MobileLayout