diff --git a/plugins/PreviewStage/PreviewMain.qml b/plugins/PreviewStage/PreviewMain.qml
index 6b5ce2436b..1b8387644d 100644
--- a/plugins/PreviewStage/PreviewMain.qml
+++ b/plugins/PreviewStage/PreviewMain.qml
@@ -11,12 +11,30 @@ import Cura 1.0 as Cura
 
 Item
 {
+
+    // Subtract the actionPanel from the safe area. This way the view won't draw interface elements under/over it
+    Item {
+        id: safeArea
+        visible: false
+        anchors.left: parent.left
+        anchors.right: actionPanelWidget.left
+        anchors.top: parent.top
+        anchors.bottom: actionPanelWidget.top
+    }
+
     Loader
     {
         id: previewMain
         anchors.fill: parent
 
         source: UM.Controller.activeView != null && UM.Controller.activeView.mainComponent != null ? UM.Controller.activeView.mainComponent : ""
+
+        Binding
+        {
+            target: previewMain.item
+            property: "safeArea"
+            value:safeArea
+        }
     }
 
     Cura.ActionPanelWidget
diff --git a/plugins/SimulationView/LayerSlider.qml b/plugins/SimulationView/LayerSlider.qml
index 88f298d1f5..15b0fdbe12 100644
--- a/plugins/SimulationView/LayerSlider.qml
+++ b/plugins/SimulationView/LayerSlider.qml
@@ -176,6 +176,11 @@ Item
         }
     }
 
+    onHeightChanged : {
+        // After a height change, the pixel-position of the lower handle is out of sync with the property value
+        setLowerValue(lowerValue)
+    }
+
     // Upper handle
     Rectangle
     {
@@ -333,7 +338,6 @@ Item
         // set the slider position based on the lower value
         function setValue(value)
         {
-
             // Normalize values between range, since using arrow keys will create out-of-the-range values
             value = sliderRoot.normalizeValue(value)
 
diff --git a/plugins/SimulationView/SimulationView.py b/plugins/SimulationView/SimulationView.py
index 28d5a74523..3a7cb0d2fe 100644
--- a/plugins/SimulationView/SimulationView.py
+++ b/plugins/SimulationView/SimulationView.py
@@ -48,7 +48,7 @@ if TYPE_CHECKING:
 catalog = i18nCatalog("cura")
 
 
-## View used to display g-code paths.
+## The preview layer view. It is used to display g-code paths.
 class SimulationView(CuraView):
     # Must match SimulationViewMenuComponent.qml
     LAYER_VIEW_TYPE_MATERIAL_TYPE = 0
diff --git a/plugins/SimulationView/SimulationViewMainComponent.qml b/plugins/SimulationView/SimulationViewMainComponent.qml
index 58901652d3..cd7d108370 100644
--- a/plugins/SimulationView/SimulationViewMainComponent.qml
+++ b/plugins/SimulationView/SimulationViewMainComponent.qml
@@ -11,9 +11,18 @@ import Cura 1.0 as Cura
 
 Item
 {
-    property bool is_simulation_playing: false
+    // An Item whose bounds are guaranteed to be safe for overlays to be placed.
+    // Defaults to parent, ie. the entire available area
+    // eg. the layer slider will not be placed in this area.
+    property var safeArea: parent
+
+
+    property bool isSimulationPlaying: false
+    readonly property var layerSliderSafeYMax: safeArea.y + safeArea.height
+
     visible: UM.SimulationView.layerActivity && CuraApplication.platformActivity
 
+    // A slider which lets users trace a single layer (XY movements)
     PathSlider
     {
         id: pathSlider
@@ -58,7 +67,7 @@ Item
     UM.SimpleButton
     {
         id: playButton
-        iconSource: !is_simulation_playing ? "./resources/simulation_resume.svg": "./resources/simulation_pause.svg"
+        iconSource: !isSimulationPlaying ? "./resources/simulation_resume.svg": "./resources/simulation_pause.svg"
         width: UM.Theme.getSize("small_button").width
         height: UM.Theme.getSize("small_button").height
         hoverColor: UM.Theme.getColor("slider_handle_active")
@@ -88,7 +97,7 @@ Item
 
         onClicked:
         {
-            if(is_simulation_playing)
+            if(isSimulationPlaying)
             {
                 pauseSimulation()
             }
@@ -102,7 +111,7 @@ Item
         {
             UM.SimulationView.setSimulationRunning(false)
             simulationTimer.stop()
-            is_simulation_playing = false
+            isSimulationPlaying = false
             layerSlider.manuallyChanged = true
             pathSlider.manuallyChanged = true
         }
@@ -131,7 +140,7 @@ Item
 
             // When the user plays the simulation, if the path slider is at the end of this layer, we start
             // the simulation at the beginning of the current layer.
-            if (!is_simulation_playing)
+            if (!isSimulationPlaying)
             {
                 if (currentPath >= numPaths)
                 {
@@ -166,22 +175,28 @@ Item
             }
             // The status must be set here instead of in the resumeSimulation function otherwise it won't work
             // correctly, because part of the logic is in this trigger function.
-            is_simulation_playing = true
+            isSimulationPlaying = true
         }
     }
 
+    // Scrolls trough Z layers
     LayerSlider
     {
+        property var preferredHeight: UM.Theme.getSize("slider_layerview_size").height
+        property double heightMargin: UM.Theme.getSize("default_margin").height
         id: layerSlider
 
         width: UM.Theme.getSize("slider_handle").width
-        height: UM.Theme.getSize("slider_layerview_size").height
+        height: preferredHeight + heightMargin * 2 < layerSliderSafeYMax ? preferredHeight : layerSliderSafeYMax - heightMargin * 2
 
         anchors
         {
             right: parent.right
             verticalCenter: parent.verticalCenter
+            verticalCenterOffset: -(parent.height - layerSliderSafeYMax) / 2 // center between parent top and layerSliderSafeYMax
             rightMargin: UM.Theme.getSize("default_margin").width
+            bottomMargin: heightMargin
+            topMargin: heightMargin
         }
 
         // Custom properties