Refactor 'Route Description' and 'Action Container' for Visual Cleanliness

src/app/components/Actions/RouteDescription.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import Slider from 'rc-slider';
+import VerticalSlider from '../TimeTravel/VerticalSlider';
 
 /*
   Render's the red route description on app's left sided column between the clear button and the list of state snapshots. The route description is derived from the first state snapshot.
@@ -12,12 +14,26 @@ const RouteDescription = (props: RouteProps): JSX.Element => {
   const { actions } = props;
 
   const url: URL = new URL(actions[0].props.routePath); // Use new URL to use the url.pathname method.
+
   return (
-    <div className='routedescription'>
-      <h3 className='route'>Route: {url.pathname}</h3>
-      {actions}
-    </div>
+      <div className='routedescription' >
+        <h3 className='route'>Route: {url.pathname}</h3>
+          <div style={{
+            // div that contains slider and snapshots
+              display: 'flex',
+              flexDirection: 'row',
+              height: `${actions.length * 30}px`,
+              marginBottom: '50px'
+          }}>
+            <VerticalSlider className='main-slider' snapshots={actions} />
+            <div style={{marginTop: '10px'}}> 
+              {/* actual snapshots per route */}
+              {actions}
+            </div>
+          </div>
+      </div>
   );
 };
 
+
 export default RouteDescription;

src/app/containers/ActionContainer.tsx

@@ -10,9 +10,6 @@ import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
 
-import Slider from 'rc-slider';
-import VerticalSlider from '../components/TimeTravel/VerticalSlider';
-
 /*
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
 */
@@ -252,27 +249,13 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-          <div className='MapRouteAndSlider' style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-          }}>
-            <div className='snapshots'>
-             {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
-              {dropdownSelection === 'TimeJump' && 
-            Object.keys(routes).map((route, i) => (
-                  <div style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  height: `${routes[route].length * 4.5}vh`,
-                  marginBottom: '30px'
-                  }}>
-                <VerticalSlider className='main-slider' snapshots={routes[route]}/>
+          <div className='snapshots'>
+            {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
+            {dropdownSelection === 'TimeJump' && 
+              Object.keys(routes).map((route, i) => (
                 <RouteDescription key={`route${i}`} actions={routes[route]} />
-                  </div>
               ))
-          }
-            </div>
+            }
           </div>
         </div>
       ) : null}