From 9463c3afef42eceac4a00dde16407c09bae6468d Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:47:55 -0700
Subject: [PATCH 1/5] toggle: Make experimental icon float to the left

This allows experimental and non-experimental toggles to appear visually
aligned.
---
 src/components/controls/toggle.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/controls/toggle.js b/src/components/controls/toggle.js
index 18c355ac1..6edb9fdb0 100644
--- a/src/components/controls/toggle.js
+++ b/src/components/controls/toggle.js
@@ -6,6 +6,7 @@ import { SidebarSubtitle } from "./styles";
 const ToggleContainer = styled.div`
   // Same as ToggleBackground, necessary for panel toggles.
   height: 21px;
+  position: relative;
 `
 
 const ToggleBackground = styled.label`
@@ -31,7 +32,9 @@ const ToggleSubtitle = styled(SidebarSubtitle)`
 
 const ExperimentalIcon = styled.span`
   color: ${(props) => props.theme.color};
-  margin-right: 5px;
+  position: absolute;
+  left: -12px;
+  top: 6px;
 `
 
 const Slider = styled.div`

From df7b5a045b277508103aa97f6c94dbf2bb12d82d Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:25:25 -0700
Subject: [PATCH 2/5] Move focus toggle under confidence interval toggle

Adjust the confidence interval toggle's margin for visual alignment.
---
 src/components/controls/choose-metric.js | 2 +-
 src/components/controls/controls.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/controls/choose-metric.js b/src/components/controls/choose-metric.js
index ed970fd05..e4ff42596 100644
--- a/src/components/controls/choose-metric.js
+++ b/src/components/controls/choose-metric.js
@@ -52,7 +52,7 @@ class ChooseMetric extends React.Component {
 
         {this.props.showTreeToo ?
           null : (
-            <div style={{margin: 5}}>
+            <div style={{marginBottom: 5}}>
               <Toggle
                 display={this.props.temporalConfidence.display}
                 on={this.props.temporalConfidence.on}
diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
index 9196bfa4f..74e05788d 100644
--- a/src/components/controls/controls.tsx
+++ b/src/components/controls/controls.tsx
@@ -66,8 +66,8 @@ function Controls() {
           tooltip={TreeInfo}
           options={<>
             <ChooseLayout />
-            <ToggleFocus tooltip={ToggleFocusInfo} />
             <ChooseMetric />
+            <ToggleFocus tooltip={ToggleFocusInfo} />
             <ChooseBranchLabelling />
             <ChooseTipLabel />
             <ChooseSecondTree />

From 6b9460ba8d36fcfbe021d83afd53f0a45c1aeebe Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:06:09 -0700
Subject: [PATCH 3/5] Update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b336e137f..51f3ffc92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+* Moved the "Focus on Selected" toggle next to the "Show confidence intervals" toggle.
+  ([#1875](https://github.com/nextstrain/auspice/pull/1875))
+
 ## version 2.59.0 - 2024/10/22
 
 

From 7a19676ae7c3844558c3807156091e33431f1cd8 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 23 Oct 2024 09:35:02 -0700
Subject: [PATCH 4/5] choose-explode-attr: Make experimental icon float to the
 left

This aligns better with "toggle: Make experimental icon float to the
left" (9463c3af).
---
 src/components/controls/choose-explode-attr.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/controls/choose-explode-attr.js b/src/components/controls/choose-explode-attr.js
index 86f6c8bf1..c22a0a7c1 100644
--- a/src/components/controls/choose-explode-attr.js
+++ b/src/components/controls/choose-explode-attr.js
@@ -40,8 +40,8 @@ class ChooseExplodeAttr extends React.Component {
     return (
       <div style={{paddingTop: 10}}>
         <SidebarSubtitleFlex data-tip data-for="explode_tree">
-          <span>
-            <ImLab style={{ marginRight: "5px" }}/>
+          <span style={{ position: "relative" }}>
+            <ImLab style={{ position: "absolute", left: "-14px", top: "1px" }}/>
             {t("sidebar:Explode Tree By")}
           </span>
           {tooltip && !this.props.mobileDisplay && (

From af09673c71042fdbf4c221dc033974d24839e49f Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:03:58 -0700
Subject: [PATCH 5/5] Set explicit font size for experimental icons

Instead of inheriting from parent which can vary.
---
 src/components/controls/choose-explode-attr.js | 2 +-
 src/components/controls/toggle.js              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/controls/choose-explode-attr.js b/src/components/controls/choose-explode-attr.js
index c22a0a7c1..025181191 100644
--- a/src/components/controls/choose-explode-attr.js
+++ b/src/components/controls/choose-explode-attr.js
@@ -41,7 +41,7 @@ class ChooseExplodeAttr extends React.Component {
       <div style={{paddingTop: 10}}>
         <SidebarSubtitleFlex data-tip data-for="explode_tree">
           <span style={{ position: "relative" }}>
-            <ImLab style={{ position: "absolute", left: "-14px", top: "1px" }}/>
+            <ImLab style={{ position: "absolute", left: "-14px", top: "2px", fontSize: "10px" }}/>
             {t("sidebar:Explode Tree By")}
           </span>
           {tooltip && !this.props.mobileDisplay && (
diff --git a/src/components/controls/toggle.js b/src/components/controls/toggle.js
index 6edb9fdb0..ee536aa4d 100644
--- a/src/components/controls/toggle.js
+++ b/src/components/controls/toggle.js
@@ -32,6 +32,7 @@ const ToggleSubtitle = styled(SidebarSubtitle)`
 
 const ExperimentalIcon = styled.span`
   color: ${(props) => props.theme.color};
+  font-size: 10px;
   position: absolute;
   left: -12px;
   top: 6px;