diff --git a/src/dialogs/more-info/components/ha-more-info-toggle.ts b/src/dialogs/more-info/components/ha-more-info-toggle.ts
index 5f10a849e2..0548a45e9a 100644
--- a/src/dialogs/more-info/components/ha-more-info-toggle.ts
+++ b/src/dialogs/more-info/components/ha-more-info-toggle.ts
@@ -128,7 +128,9 @@ export class HaMoreInfoToggle extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-control-switch {
-        height: 320px;
+        height: 45vh;
+        max-height: 320px;
+        min-height: 200px;
         --control-switch-thickness: 100px;
         --control-switch-border-radius: 24px;
         --control-switch-padding: 6px;
@@ -138,7 +140,9 @@ export class HaMoreInfoToggle extends LitElement {
         display: flex;
         flex-direction: column;
         width: 100px;
-        height: 320px;
+        height: 45vh;
+        max-height: 320px;
+        min-height: 200px;
         padding: 6px;
         box-sizing: border-box;
       }
diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts
index b82226ec6f..5e7816e136 100644
--- a/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts
@@ -84,7 +84,9 @@ export class HaMoreInfoLightBrightness extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-control-slider {
-        height: 320px;
+        height: 45vh;
+        max-height: 320px;
+        min-height: 200px;
         --control-slider-thickness: 100px;
         --control-slider-border-radius: 24px;
         --control-slider-color: var(--primary-color);
diff --git a/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts b/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
index d9114c229b..29f1158628 100644
--- a/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
@@ -535,8 +535,12 @@ class MoreInfoViewLightColorPicker extends LitElement {
         }
 
         ha-control-slider {
-          height: 320px;
+          height: 45vh;
+          max-height: 320px;
+          min-height: 200px;
           margin: 20px 0;
+          --control-slider-thickness: 100px;
+          --control-slider-border-radius: 24px;
         }
 
         ha-labeled-slider {
@@ -554,8 +558,6 @@ class MoreInfoViewLightColorPicker extends LitElement {
         }
 
         .color-temp {
-          --control-slider-thickness: 100px;
-          --control-slider-border-radius: 24px;
           --control-slider-background: -webkit-linear-gradient(
             top,
             rgb(166, 209, 255) 0%,