feat: add generic and ID-based regular dropdown components along with simulation dashboard styling

app/src/components/ui/inputs/RegularDropDown.tsx

@@ -82,7 +82,7 @@ const RegularDropDown: React.FC<DropdownProps> = ({ header, options, onSelect, s
     return (
         <div className="regularDropdown-container" ref={dropdownRef}>
             {/* Header */}
-            <div className="dropdown-header flex-sb" onClick={toggleDropdown}>
+            <div className="dropdown-header flex-sb" onClick={toggleDropdown} title={selectedOption || header}>
                 <div className="key">{selectedOption || header}</div>
                 <div className="icon">▾</div>
             </div>

app/src/components/ui/inputs/RegularDropDownID.tsx

@@ -70,7 +70,7 @@ const RegularDropDownID: React.FC<DropdownProps> = ({ header, options, onSelect,
 
     return (
         <div className="regularDropdown-container" ref={dropdownRef}>
-            <div className="dropdown-header flex-sb" onClick={toggleDropdown}>
+            <div className="dropdown-header flex-sb" onClick={toggleDropdown} title={selectedOption || header}>
                 <div className="key">{selectedOption || header}</div>
                 <div className="icon">▾</div>
             </div>

app/src/styles/components/simulationDashboard/_simulationDashBoard.scss

@@ -18,7 +18,7 @@
         transition: none !important;
     }
 
-    * > {
+    *> {
         pointer-events: auto;
     }
 
@@ -355,9 +355,47 @@
             flex-direction: column;
             gap: 11px;
 
+            .datas {
+                width: 100%;
+                display: flex;
+                align-items: center;
+
+                &__label,
+                &__class,
+                .input-container,
+                .title {
+                    flex: 1;
+                }
+
+                &__label,
+                .title {
+                    flex: 0.8;
+                    max-width: 90px;
+                    min-width: 90px;
+                    width: 90px;
+                    line-height: 23px;
+                }
+
+                &__class,
+                .input-container {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+
+                    .regularDropdown-container {
+                        width: 100%;
+
+                        .icon {
+                            padding: 0;
+                        }
+                    }
+                }
+            }
+
             .value-field-container {
                 padding: 0;
                 margin: 0;
+
                 .label {
                     width: 90px;
                     max-width: 90px;
@@ -548,6 +586,9 @@
 
             .type {
                 flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 text-align: center;
                 padding: 4px 0;
                 border-radius: 19px;
@@ -622,6 +663,7 @@
                     .input-wrapper {
                         max-width: 126px;
                         width: 126px;
+
                         .icon {
                             padding: 0;
                         }
@@ -648,8 +690,10 @@
 
                     .delete {
                         cursor: pointer;
+
                         &:hover {
                             background: var(--log-error-background-color);
+
                             path {
                                 stroke: var(--log-error-text-color);
                             }
@@ -659,6 +703,7 @@
                     .regularDropdown-container {
                         max-width: 112px;
                         width: 112px;
+
                         .icon {
                             padding: 0;
                         }
@@ -686,6 +731,7 @@
                     }
                 }
             }
+
             .data-wrapper {
                 display: flex;
                 flex-direction: column;
@@ -1109,6 +1155,7 @@
 }
 
 .fill-width {
+
     .input-wrapper,
     .regularDropdown-container {
         max-width: none !important;
@@ -1121,4 +1168,4 @@
         max-width: 70px !important;
         width: 100% !important;
     }
-}
+}