improve dashboard

dashboard/src/App.css

@@ -8,15 +8,9 @@
     pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
-}
-
 .App-header {
     background-color: #282c34;
-    min-height: 40px; /*100vmin*/
+    min-height: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -25,39 +19,34 @@
     color: white;
 }
 
+.ContextContainer {
+    width: 100vw;
+    overflow-x:scroll;
+    white-space: nowrap;
+    direction:rtl;
+}
+
 .CurrentContext {
     height: 50vh;
     width: 100vw;
     object-fit: contain;
     /*object-fit: scale-down;*/
-    object-position: right;
+    object-position: center;
 }
 
-.CurrentAst {
-    height: 50vh;
+.AstContainer {
     width: 100vw;
-    object-fit: cover;
-    object-position: right;
+    overflow-x:scroll;
+    white-space: nowrap;
+    direction:rtl;
 }
 
-.AstInTimeline {
-    max-width: 100%;
-
+.CurrentAst {
+    height: 50vh;
+    object-fit: cover;
+    object-position: bottom right;
 }
 
 .App-link {
     color: #61dafb;
 }
-
-.MG-Timeline {
-    max-width: 4000px !important;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

dashboard/src/App.js

@@ -85,7 +85,7 @@ function App() {
 
 function CurrentASTState(props) {
   return (
-    <div className="curent-state">
+    <div className="AstContainer">
       <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} />
     </div>
   )
@@ -93,7 +93,7 @@ function CurrentASTState(props) {
 
 function CurrentContextState(props) {
     return (
-        <div className="curent-state">
+        <div className="ContextContainer">
             <img className="CurrentContext" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} />
         </div>
     )