optimized pendulum visual

src/app/pages/algorithms/pendulum/pendulum.component.html

@@ -5,29 +5,41 @@
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
     <div class="controls-container">
-      <div class="slider-control-container">
+      <div class="sliders-grid">
-          <p style="white-space: nowrap">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
             <ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
-          <p style="white-space: nowrap">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
+          </div>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.ATTRACTION' | translate }}</p>
             <ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
           </div>
-      <div class="slider-control-container">
+
-        <p style="white-space: nowrap">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
             <ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
-        <p style="white-space: nowrap">{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
+          </div>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
             <ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
           </div>
-      <div class="slider-control-container">
+
-        <p style="white-space: nowrap">{{ 'PENDULUM.M1_MASS' | translate }}</p>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.M1_MASS' | translate }}</p>
             <ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
-        <p style="white-space: nowrap">{{ 'PENDULUM.M2_MASS' | translate }}</p>
+          </div>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.M2_MASS' | translate }}</p>
             <ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
           </div>
-      <div class="slider-control-container">
+
-          <p style="white-space: nowrap">{{ 'PENDULUM.DAMPING' | translate }}</p>
+          <div class="slider-item full-width">
+            <p>{{ 'PENDULUM.DAMPING' | translate }}</p>
             <ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
           </div>
-      <div class="slider-control-container">
+      </div>
+
+      <div class="actions-container">
         <button mat-raised-button color="primary" (click)="pushPendulum(true)">
           {{ 'PENDULUM.POKE_M1' | translate }}
         </button>
@@ -38,6 +50,7 @@
           {{ 'PENDULUM.RESET' | translate }}
         </button>
       </div>
+
       <div class="legend" style="margin-top: 10px">
         <span><span class="legend-color L1"></span> L1</span>
         <span><span class="legend-color L2"></span> L2</span>

src/app/pages/algorithms/pendulum/pendulum.component.scss

@@ -0,0 +1,41 @@
+.sliders-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-bottom: 1.5rem;
+
+  .slider-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-right: 1rem;
+
+    p {
+      width: 100px;
+      flex-shrink: 0;
+      margin: 0;
+      font-size: 0.9rem;
+    }
+
+    ngx-slider {
+      flex-grow: 1;
+    }
+
+    &.full-width {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+.actions-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 900px) {
+  .sliders-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}

src/styles.scss

@@ -359,12 +359,6 @@ canvas {
   margin-bottom: 1rem;
 }
 
-.slider-control-container {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 /* Sorting Visualization & Canvas */
 .sorting-visualization-area,
 .visualization-area {