css

client/src/components/Level.tsx

@@ -155,13 +155,13 @@ function Level() {
       </div>
 
     </div>
-    <Split minSize={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
+    <Split minSize={200} sizes={[30, 45, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
-      <div className="main-panel">
+      <div className="side-panel">
         <div ref={introductionPanelRef} className="introduction-panel">
           <Markdown>{level?.data?.introduction}</Markdown>
         </div>
       </div>
-      <div className="info-panel">
+      <div className="exercise-panel">
         <div className="exercise">
           {/* <h4>Aufgabe:</h4> */}
           <Markdown>{level?.data?.descrText}</Markdown>

client/src/components/level.css

@@ -24,14 +24,15 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
 }
 
-.main-panel, .info-panel, .doc-panel {
+.side-panel, .exercise-panel, .doc-panel {
   height: 100%;
   overflow: auto;
 }
 
-.main-panel {
+.side-panel {
   display: flex;
   flex-flow: column;
+  background-color: #e9f2fb;
 }
 
 .infoview {