From aceb0ea24eb9860420aa9cc835e33073f98049d3 Mon Sep 17 00:00:00 2001
From: Lobo <andreas.dahm@gmail.com>
Date: Mon, 23 Feb 2026 09:43:34 +0100
Subject: [PATCH] optimized pendulum visual

---
 .../pendulum/pendulum.component.html          | 57 ++++++++++++-------
 .../pendulum/pendulum.component.scss          | 41 +++++++++++++
 src/styles.scss                               |  6 --
 3 files changed, 76 insertions(+), 28 deletions(-)

diff --git a/src/app/pages/algorithms/pendulum/pendulum.component.html b/src/app/pages/algorithms/pendulum/pendulum.component.html
index 1775f09..acbc526 100644
--- a/src/app/pages/algorithms/pendulum/pendulum.component.html
+++ b/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">
-          <p style="white-space: nowrap">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
-          <ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
-          <p style="white-space: nowrap">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
-          <ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
+      <div class="sliders-grid">
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
+            <ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
+          </div>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.ATTRACTION' | translate }}</p>
+            <ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
+          </div>
+
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
+            <ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
+          </div>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
+            <ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
+          </div>
+
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.M1_MASS' | translate }}</p>
+            <ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
+          </div>
+          <div class="slider-item">
+            <p>{{ 'PENDULUM.M2_MASS' | translate }}</p>
+            <ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
+          </div>
+
+          <div class="slider-item full-width">
+            <p>{{ 'PENDULUM.DAMPING' | translate }}</p>
+            <ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
+          </div>
       </div>
-      <div class="slider-control-container">
-        <p style="white-space: nowrap">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
-        <ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
-        <p style="white-space: nowrap">{{ '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>
-        <ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
-        <p style="white-space: nowrap">{{ '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>
-          <ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
-      </div>
-      <div class="slider-control-container">
+
+      <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>
diff --git a/src/app/pages/algorithms/pendulum/pendulum.component.scss b/src/app/pages/algorithms/pendulum/pendulum.component.scss
index e69de29..eea0f7d 100644
--- a/src/app/pages/algorithms/pendulum/pendulum.component.scss
+++ b/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;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index e8858bc..febb19c 100644
--- a/src/styles.scss
+++ b/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 {