fix(client): action row button alignment (#64851)

client/src/templates/Challenges/classic/action-row.tsx

@@ -43,7 +43,7 @@ const ActionRow = (props: ActionRowProps): JSX.Element => {
     return (
       <div className='action-row'>
         <div className='tabs-row'>
-          <div className='tabs-row-right'>
+          <div className='interactive-editor-tab'>
             <button
               aria-expanded={!!showInteractiveEditor}
               aria-describedby='interactive-editor-desc'

client/src/templates/Challenges/classic/classic.css

@@ -78,13 +78,15 @@
   display: flex;
   justify-content: center;
   gap: 3px;
+  /* these three center the middle items on the page */
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .tabs-row-right {
   display: flex;
   justify-content: flex-end;
-  /* Ensure the right group pins to the end even when no left/middle items exist */
-  margin-inline-start: auto;
 }
 
 .monaco-editor-tabs button + button {
@@ -96,11 +98,14 @@
   margin-inline-end: auto;
 }
 
-.panel-display-tabs button:first-child,
-.tabs-row > button:first-child {
+.panel-display-tabs button:first-child {
   margin: 0 10px 0 0;
 }
 
+.panel-display-tabs button:last-child {
+  margin: 0;
+}
+
 .panel-display-tabs button:last-of-type {
   border-inline-start-width: 1px;
 }
@@ -113,6 +118,11 @@
   border-inline-end-width: 1px;
 }
 
+.interactive-editor-tab {
+  /* Ensure the right group pins to the end even when no left/middle items exist */
+  margin-left: auto;
+}
+
 .restart-step-tab {
   margin: 0 auto;
 }