updated simulation player

app/src/styles/layout/sidebar.scss

@@ -366,15 +366,66 @@
     min-height: 50vh;
     padding-bottom: 12px;
     position: relative;
-    display: flex;
-    flex-direction: column;
+    overflow: auto;
 
     .sidebar-right-content-container {
       border-bottom: 1px solid var(--border-color);
-      // flex: 1;
       height: calc(100% - 36px);
       position: relative;
-      overflow: auto;
+      width: 320px;
+      .no-event-selected {
+        color: #666;
+        padding: 1.8rem 1rem;
+        grid-column: 1 / -1;
+        .products-list {
+          padding-top: 1rem;
+          .products-list-title {
+            text-align: start;
+            color: var(--accent-color);
+            font-size: var(--font-size-regular);
+          }
+          ul {
+            li {
+              text-align: start;
+              margin: 8px 0;
+              padding: 2px 0;
+              text-decoration: none;
+              &::marker {
+                content: "";
+              }
+              button {
+                width: fit-content;
+                position: relative;
+                transition: all 0.2s ease;
+                @include flex-center;
+                gap: 4px;
+                &:before {
+                  content: "";
+                  position: absolute;
+                  left: 0;
+                  bottom: -4px;
+                  background: var(--accent-color);
+                  height: 1px;
+                  width: 0%;
+                  transition: all 0.3s ease;
+                }
+              }
+              &:hover {
+                button {
+                  path {
+                    stroke: var(--accent-color);
+                    strokeWidth: 1.5px;
+                  }
+                  color: var(--accent-color);
+                  &:before {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -642,7 +693,7 @@
 
         path {
           stroke: var(--accent-color);
-          stroke-width: 1.5px;
+          strokeWidth: 1.5px;
         }
 
         &:hover {
@@ -675,10 +726,14 @@
         color: var(--primary-color);
         border-radius: #{$border-radius-small};
         cursor: pointer;
-
+        outline: none;
+        border: none;
         path {
           stroke: var(--primary-color);
         }
+        &:disabled {
+          background-color: var(--text-disabled);
+        }
       }
     }
 
@@ -706,7 +761,7 @@
       }
       .selected-actions-list {
         margin-bottom: 8px;
-        .eye-dropper-input-container{
+        .eye-dropper-input-container {
           padding: 6px 12px;
           .regularDropdown-container {
             padding: 5px 8px;
@@ -747,19 +802,21 @@
           width: 100%;
           margin: 2px 0;
           border-radius: #{$border-radius-small};
-        }
+          .value {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            min-width: 80%;
+            gap: 6px;
+            .input-value {
+              text-align: start;
+            }
 
-        .value {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          min-width: 80%;
-          gap: 6px;
-
-          input {
-            width: fit-content;
-            outline: none;
-            accent-color: var(--accent-color);
+            input {
+              width: fit-content;
+              outline: none;
+              accent-color: var(--accent-color);
+            }
           }
         }
 
@@ -797,6 +854,7 @@
         @include flex-center;
         padding: 4px;
         cursor: grab;
+        width: 100%;
 
         &:active {
           cursor: grabbing;