From 74d195c745db7bd12c7a61f77a93fa8a219b4d54 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 27 Apr 2022 11:02:23 +0200
Subject: [PATCH] :bug: Fix style issue with focus mode

---
 .../styles/main/partials/sidebar.scss         | 19 ++++++++++++++-----
 .../app/main/ui/workspace/sidebar/layers.cljs |  8 +++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 452ee5220..9451071e1 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -125,25 +125,34 @@
         width: 100%;
         height: 100%;
         display: grid;
+        align-items: center;
         grid-template-columns: auto 1fr auto;
         grid-column-gap: 8px;
+        cursor: pointer;
 
         & .back-button {
-          cursor: pointer;
           background: none;
           border: none;
-          transform: rotate(180deg);
           padding: 0;
+          margin: 0;
+
+          & svg {
+            fill: $color-white;
+            transform: rotate(180deg);
+            margin-top: 3px;
+          }
 
           &:hover {
             svg {
               fill: $color-primary;
             }
           }
+        }
 
-          & svg {
-            fill: $color-white;
-          }
+        & .focus-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         & .focus-mode {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index 690287728..f1efac1d8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -498,11 +498,9 @@
     [:div#layers.tool-window
      (if (d/not-empty? focus)
        [:div.tool-window-bar
-        [:div.focus-title
-         [:button.back-button
-          {:on-click #(st/emit! (dw/toggle-focus-mode))}
-          i/arrow-slide]
-         [:span (or title (tr "workspace.focus.selection"))]
+        [:div.focus-title {:on-click #(st/emit! (dw/toggle-focus-mode))}
+         [:button.back-button i/arrow-slide]
+         [:div.focus-name (or title (tr "workspace.focus.selection"))]
          [:div.focus-mode (tr "workspace.focus.focus-mode")]]]
 
        filter-component)