Fix toggle height (and thus vertical alignment) in panel section header

nextstrain · Nov 14, 2023 · 41b8508 · 41b8508
1 parent e117e19
commit 41b8508
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/controls/toggle.js b/src/components/controls/toggle.js
@@ -2,6 +2,11 @@ import React from "react";
 import styled from 'styled-components';
 import { SidebarSubtitle } from "./styles";
 
+const ToggleContainer = styled.div`
+  // Same as ToggleBackground, necessary for panel toggles.
+  height: 21px;
+`
+
 const ToggleBackground = styled.label`
   position: relative;
   display: inline-block;
@@ -72,7 +77,7 @@ const Toggle = ({display, on, callback, label, style={}}) => {
   if (!display) return null;
 
   return (
-    <div style={style}>
+    <ToggleContainer style={style}>
       <ToggleBackground>
         <Input type="checkbox" checked={on} onChange={callback}/>
         <Slider/>
@@ -82,7 +87,7 @@ const Toggle = ({display, on, callback, label, style={}}) => {
           </ToggleSubtitle>
         )}
       </ToggleBackground>
-    </div>
+    </ToggleContainer>
   );
 };