From 261b86a5a502e2b1eaa3ffdf4a5e2c235ace9034 Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Tue, 19 Nov 2024 16:27:47 -0800
Subject: [PATCH] Make icons change layout too [#1911]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This leads to a slight styling change, but is probably Close Enough™
---
 CHANGELOG.md                            | 2 ++
 src/components/controls/panel-layout.js | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75d05fa8d..20ce4a662 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+* Bugfix: Clicking on the icons for FULL and GRID layout now changes the layout, just like clicking on the text ([#1911](https://github.com/nextstrain/auspice/issues/1911))
+
 ## version 2.61.2 - 2024/11/19
 
 
diff --git a/src/components/controls/panel-layout.js b/src/components/controls/panel-layout.js
index c2cf1ead5..4d7444d6d 100644
--- a/src/components/controls/panel-layout.js
+++ b/src/components/controls/panel-layout.js
@@ -10,7 +10,8 @@ import { SidebarButton } from "./styles";
 const ButtonText = styled.span`
   margin: 5px;
   position: relative;
-  top: -1px;
+  left: 4px;
+  top: -6px;
 `;
 
 const PanelsFullIcon = withTheme(icons.PanelsFull);
@@ -27,7 +28,6 @@ class PanelLayouts extends React.Component {
 
     return (
       <div style={{marginTop: 0, marginBottom: 10}}>
-        <PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/>
         <SidebarButton
           selected={this.props.panelLayout === "full"}
           onClick={() => {
@@ -35,10 +35,10 @@ class PanelLayouts extends React.Component {
             this.props.dispatch({ type: CHANGE_PANEL_LAYOUT, data: "full" });
           }}
         >
+          <PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/>
           <ButtonText>{t("sidebar:full")}</ButtonText>
         </SidebarButton>
 
-        <PanelsGridIcon width={22} selected={this.props.panelLayout === "grid"}/>
         <SidebarButton
           selected={this.props.panelLayout === "grid"}
           onClick={() => {
@@ -46,9 +46,9 @@ class PanelLayouts extends React.Component {
             this.props.dispatch({ type: CHANGE_PANEL_LAYOUT, data: "grid" });
           }}
         >
+          <PanelsGridIcon width={22} selected={this.props.panelLayout === "grid"}/>
           <ButtonText>{t("sidebar:grid")}</ButtonText>
         </SidebarButton>
-
       </div>
     );
   }