Editor style tweaks (#7805)

* Adjust linenumber paddings

* Adjust linenumber padding

* Adjust control buttons width, and page-rhs bg color

* Add gap between button groups

Author: dem4ron

app/css/bootcamp/components/codemirror.css

@@ -124,7 +124,7 @@
     }
     .cm-lineNumbers {
         .cm-gutterElement {
-            @apply pl-2 pr-8;
+            @apply pr-8 pl-12;
         }
     }
 
@@ -156,7 +156,6 @@
     }
 
     .cm-lineNumbers {
-        /* width: 2em; */
         text-align: right;
     }
 

app/css/bootcamp/components/frontend-training-page.css

@@ -1,7 +1,9 @@
 #bootcamp-frontend-training-page,
 #bootcamp-frontend-exercise-page {
     .page-body-rhs {
+        @apply bg-white;
         @apply flex-grow;
+
         @apply flex flex-col;
         @apply overflow-hidden;
         & > button {

app/javascript/components/bootcamp/CSSExercisePage/LHS/ControlButtons.tsx

@@ -88,8 +88,15 @@ export function ControlButtons({
     submitCode,
   ])
 
+  const {
+    panelSizes: { LHSWidth },
+  } = useCSSExercisePageStore()
+
   return (
-    <div className="flex py-8 justify-between">
+    <div
+      style={{ width: LHSWidth }}
+      className="flex py-8 gap-8 justify-between"
+    >
       <button onClick={handleSubmitCode} className="btn-primary btn-s">
         Check Result
       </button>