Merge branch 'issue-91-cloud-animation'

Author: mcsor

src/components/InstrumentWindow/InstrumentWindow.jsx

@@ -163,6 +163,11 @@ const InstrumentWindow = () => {
               size={100}
               delay={delay}
             />
+            <p style={{
+              textAlign: 'center',
+              maxWidth: '75%',
+              fontSize: 25 }}>Please take this time to explore the instrument
+              by clicking/tapping on the various components</p>
           </>
         )}
         {!fetching && error && (

src/style/InstrumentWindow.css

@@ -15,14 +15,19 @@
 }
 
 .instrument-container {
+    display: flex;
     position: relative;
-    width: 100%;
+    width: 75%;
     height: 100%;
+
+    justify-content: center;
+    align-items: center;
 }
 
 #instrument {
     height: 90vh;
     flex-grow: 1;
+    justify-content: center;
     position: relative; /* Ensure this is a positioning context */
 }
 
@@ -85,7 +90,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 36%;
+    width: 25%;
     padding-bottom: 25px;
 }
 
@@ -278,6 +283,10 @@
         flex-direction: column;
     }
 
+    .instrument-container {
+        width: 100%;
+    }
+
     #instrument {
         width: 100%;
     }