refactor(client): remove hasEditableBoundaries from learn wrapper (#64453)

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 />
     </>
   );

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;
 }
 

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}

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