From 82496389ed731c0ad364a1e118111b90d0c85e5e Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Fri, 23 Feb 2024 15:39:16 -0800
Subject: [PATCH] sidebar styles

---
 src/app/workspace/screen/screenview.less | 27 +++++++++++++++++++-----
 src/app/workspace/screen/screenview.tsx  |  5 +++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less
index 51399d7c1..cc89d7843 100644
--- a/src/app/workspace/screen/screenview.less
+++ b/src/app/workspace/screen/screenview.less
@@ -4,6 +4,7 @@
     .screen-view {
         flex-grow: 1;
         position: relative;
+        border-top: 1px solid @thin-border-color;
     }
 
     .screen-sidebar,
@@ -19,8 +20,6 @@
         flex-direction: column;
         height: 100%;
         overflow: hidden;
-        margin-left: 5px;
-        padding-left: 5px;
         overflow-y: auto;
         border-left: 1px solid @thin-border-color;
 
@@ -28,9 +27,27 @@
             /* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */
             display: flex;
             flex-direction: row;
-            padding: 3px 5px;
-            border-radius: 3px;
-            margin: 3px 5px 0 5px;
+            padding: 3px 0;
+            margin: 0;
+            border-bottom: 1px solid @thin-border-color;
+            font-size: var(--termfontsize);
+            font-family: var(--termfontfamily);
+            font-weight: normal;
+            line-height: var(--termlineheight);
+            color: @text-caption;
+
+            &:hover {
+                color: white;
+            }
+
+            div.pane-name {
+                visibility: hidden;
+                margin-left: calc(var(--termpad) * 2);
+            }
+
+            &:hover div.pane-name {
+                visibility: visible;
+            }
 
             i {
                 padding: 3px;
diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx
index 7cb8dc807..2cf386256 100644
--- a/src/app/workspace/screen/screenview.tsx
+++ b/src/app/workspace/screen/screenview.tsx
@@ -300,6 +300,7 @@ class ScreenSidebar extends React.Component<{ screen: Screen; width: string }, {
         return (
             <div className="screen-sidebar" style={{ width: width }} ref={this.sidebarRef}>
                 <div className="sidebar-header">
+                    <div className="pane-name">sidebar</div>
                     <div className="flex-spacer" />
                     <div onClick={this.sidebarOpenHalf} title="Set Sidebar Width to 50%">
                         <i className="fa-sharp fa-solid fa-table-columns" />
@@ -307,8 +308,8 @@ class ScreenSidebar extends React.Component<{ screen: Screen; width: string }, {
                     <div onClick={this.sidebarOpenPartial} title="Set Sidebar Width to 500px">
                         <i className="fa-sharp fa-solid fa-sidebar-flip" />
                     </div>
-                    <div onClick={this.sidebarClose} style={{ marginLeft: 5 }}>
-                        <i className="fa-sharp fa-solid fa-xmark" />
+                    <div onClick={this.sidebarClose} style={{ marginLeft: 5, marginRight: 10 }}>
+                        <i className="fa-sharp fa-solid fa-xmark-large" />
                     </div>
                 </div>
                 <If condition={!sidebarOk}>