Dashboard: Fixes back button styles in kiosk mode (#19165)

Fixes: #18114

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -193,6 +193,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 
 
 // sidemenu
 // sidemenu
 $side-menu-width: 60px;
 $side-menu-width: 60px;
+$navbar-padding: 20px;
 
 
 // dashboard
 // dashboard
 $dashboard-padding: $space-md;
 $dashboard-padding: $space-md;

public/sass/_variables.generated.scss

@@ -196,6 +196,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 
 
 // sidemenu
 // sidemenu
 $side-menu-width: 60px;
 $side-menu-width: 60px;
+$navbar-padding: 20px;
 
 
 // dashboard
 // dashboard
 $dashboard-padding: $space-md;
 $dashboard-padding: $space-md;

public/sass/components/_navbar.scss

@@ -46,7 +46,7 @@
 
 
 .panel-in-fullscreen {
 .panel-in-fullscreen {
   .navbar {
   .navbar {
-    padding-left: 20px;
+    padding-left: $navbar-padding;
   }
   }
 
 
   .navbar-button--add-panel,
   .navbar-button--add-panel,

public/sass/components/_view_states.scss

@@ -14,6 +14,10 @@
     i {
     i {
       opacity: 0;
       opacity: 0;
     }
     }
+
+    i.navbar-page-btn__folder-icon {
+      opacity: inherit;
+    }
   }
   }
 
 
   .navbar-button--zoom {
   .navbar-button--zoom {
@@ -25,6 +29,17 @@
   @extend .view-mode--inactive;
   @extend .view-mode--inactive;
 }
 }
 
 
+// https://github.com/grafana/grafana/issues/18114
+.view-mode--tv.panel-in-fullscreen {
+  .navbar {
+    padding-left: $navbar-padding;
+  }
+
+  .navbar-page-btn {
+    transform: none;
+  }
+}
+
 .view-mode--tv {
 .view-mode--tv {
   @extend .view-mode--inactive;
   @extend .view-mode--inactive;