From 90fd2f5cfc01f3a877f4645c24c7668d8d9c7d2f Mon Sep 17 00:00:00 2001
From: Benjamin Marguin <benjamin.marguin@makina-corpus.com>
Date: Mon, 19 Jun 2023 17:38:24 +0200
Subject: [PATCH] Limit label element to only one for each layersTree item

---
 .../LayersTreeItem/LayersTreeItem.js          | 28 ++++++++-------
 .../__snapshots__/LayersTreeItem.test.js.snap | 36 -------------------
 src/modules/Visualizer/LayersTree/styles.scss |  4 +++
 3 files changed, 20 insertions(+), 48 deletions(-)

diff --git a/src/modules/Visualizer/LayersTree/LayersTreeItem/LayersTreeItem.js b/src/modules/Visualizer/LayersTree/LayersTreeItem/LayersTreeItem.js
index 3607f0ae..eac26876 100644
--- a/src/modules/Visualizer/LayersTree/LayersTreeItem/LayersTreeItem.js
+++ b/src/modules/Visualizer/LayersTree/LayersTreeItem/LayersTreeItem.js
@@ -189,24 +189,28 @@ export class LayersTreeItem extends React.Component {
             )
           }
             >
-              <WarningZoom
-                isActive={isActive}
-                map={map}
-                layer={layer}
-              >
-                <Switch
-                  checked={!!isActive}
-                  onChange={onActiveChange}
-                  id={this.uuid}
-                />
-              </WarningZoom>
               <Tooltip
                 content={label}
                 hoverOpenDelay={2000}
                 className="layerstree-node-content__item-label__tooltip"
               >
-                <label className="layerstree-node-content__item-label__label" htmlFor={this.uuid}>{label}</label>
+                <label className="layerstree-node-content__item-label__label" htmlFor={this.uuid}>
+                  <WarningZoom
+                    isActive={isActive}
+                    map={map}
+                    layer={layer}
+                  >
+                    <Switch
+                      checked={!!isActive}
+                      onChange={onActiveChange}
+                      id={this.uuid}
+                      tagName="span"
+                    />
+                  </WarningZoom>
+                  {label}
+                </label>
               </Tooltip>
+
               <div className="layerstree-node-content__item-label__total">
                 {isActive && totalResult && (
                 <Tag
diff --git a/src/modules/Visualizer/LayersTree/LayersTreeItem/__snapshots__/LayersTreeItem.test.js.snap b/src/modules/Visualizer/LayersTree/LayersTreeItem/__snapshots__/LayersTreeItem.test.js.snap
index c8cd2658..635ba040 100644
--- a/src/modules/Visualizer/LayersTree/LayersTreeItem/__snapshots__/LayersTreeItem.test.js.snap
+++ b/src/modules/Visualizer/LayersTree/LayersTreeItem/__snapshots__/LayersTreeItem.test.js.snap
@@ -11,9 +11,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -47,9 +44,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -71,9 +65,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -107,9 +98,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -149,9 +137,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -173,9 +158,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -215,9 +197,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -261,9 +240,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Tooltip
-        </p>
         <p>
           Tooltip
         </p>
@@ -297,9 +273,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -336,9 +309,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -378,9 +348,6 @@ Array [
       <div
         className="layerstree-node-content__item-label"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
@@ -417,9 +384,6 @@ Array [
       <div
         className="layerstree-node-content__item-label--mobile"
       >
-        <p>
-          Switch
-        </p>
         <p>
           Tooltip
         </p>
diff --git a/src/modules/Visualizer/LayersTree/styles.scss b/src/modules/Visualizer/LayersTree/styles.scss
index b37af213..b63c471f 100644
--- a/src/modules/Visualizer/LayersTree/styles.scss
+++ b/src/modules/Visualizer/LayersTree/styles.scss
@@ -95,6 +95,10 @@
         display: flex;
         height: 1.2rem;
 
+        &__label > span {
+          display: inline-block;
+        }
+
         &__tooltip {  
           width: 100%;
           flex: auto;