style: sidepanel styling

This commit aims to fix the issue of titles being totally ocluded when the sidebar is dragged to its minimum width. Signed-off-by: FernandoAscencio <[email protected]>
eclipse-theia · Jan 16, 2023 · 4050d00 · 4050d00
1 parent 3c6031a
commit 4050d00
Showing 1 changed file with 52 additions and 50 deletions.
diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -26,6 +26,7 @@
   --theia-private-sidebar-scrollbar-rail-width: 7px;
   --theia-private-sidebar-scrollbar-width: 5px;
   --theia-private-sidebar-icon-size: 24px;
+  --theia-private-sidebar-sidepanel-width: 200px;
 }
 
 
@@ -51,13 +52,13 @@
 }
 
 .p-TabBar.theia-app-sides .p-TabBar-tab {
-    position: relative;
-    background: var(--theia-activityBar-background);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: var(--theia-private-sidebar-tab-height);
-    cursor: pointer;
+  position: relative;
+  background: var(--theia-activityBar-background);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: var(--theia-private-sidebar-tab-height);
+  cursor: pointer;
 }
 
 .p-TabBar.theia-app-sides .p-TabBar-tab.p-mod-current,
@@ -76,8 +77,8 @@
 }
 
 .p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
-    border-top-color: transparent;
-    box-shadow: -2px 0 0 var(--theia-activityBar-activeBorder) inset;
+  border-top-color: transparent;
+  box-shadow: -2px 0 0 var(--theia-activityBar-activeBorder) inset;
 
 }
 
@@ -148,12 +149,12 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
-#theia-left-content-panel > .p-Panel {
-    border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
+#theia-left-content-panel>.p-Panel {
+  border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
 }
 
-#theia-right-content-panel > .p-Panel {
-    border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
+#theia-right-content-panel>.p-Panel {
+  border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
 }
 
 .theia-side-panel {
@@ -162,7 +163,7 @@
 
 .p-Widget.theia-side-panel .p-Widget,
 .p-Widget .theia-sidepanel-toolbar {
-    color: var(--theia-sideBar-foreground);
+  color: var(--theia-sideBar-foreground);
 }
 
 .theia-app-sidebar-container {
@@ -202,7 +203,7 @@
   color: var(--theia-activityBar-foreground);
 }
 
-.theia-sidebar-menu > i.codicon-menu {
+.theia-sidebar-menu>i.codicon-menu {
   font-size: 16px;
 }
 
@@ -214,23 +215,23 @@
 | Perfect scrollbar
 |----------------------------------------------------------------------------*/
 
-.p-TabBar.theia-app-sides > .ps__rail-y {
+.p-TabBar.theia-app-sides>.ps__rail-y {
   width: var(--theia-private-sidebar-scrollbar-rail-width);
   z-index: 1000;
 }
 
-#theia-app-shell .p-TabBar.theia-app-sides > .ps__rail-y  >.ps__thumb-y {
+#theia-app-shell .p-TabBar.theia-app-sides>.ps__rail-y>.ps__thumb-y {
   width: var(--theia-private-sidebar-scrollbar-width);
   right: calc((var(--theia-private-sidebar-scrollbar-rail-width) - var(--theia-private-sidebar-scrollbar-width)) / 2);
 }
 
-.p-TabBar.theia-app-sides > .ps__rail-y:hover,
-.p-TabBar.theia-app-sides > .ps__rail-y:focus {
+.p-TabBar.theia-app-sides>.ps__rail-y:hover,
+.p-TabBar.theia-app-sides>.ps__rail-y:focus {
   width: var(--theia-private-sidebar-scrollbar-rail-width);
 }
 
-.p-TabBar.theia-app-sides > .ps__rail-y:hover > .ps__thumb-y,
-.p-TabBar.theia-app-sides > .ps__rail-y:focus > .ps__thumb-y {
+.p-TabBar.theia-app-sides>.ps__rail-y:hover>.ps__thumb-y,
+.p-TabBar.theia-app-sides>.ps__rail-y:focus>.ps__thumb-y {
   width: var(--theia-private-sidebar-scrollbar-width);
   right: calc((var(--theia-private-sidebar-scrollbar-rail-width) - var(--theia-private-sidebar-scrollbar-width)) / 2);
 }
@@ -241,41 +242,41 @@
 |----------------------------------------------------------------------------*/
 
 #theia-bottom-content-panel {
-    background: var(--theia-panel-background);
+  background: var(--theia-panel-background);
 }
 
 #theia-bottom-content-panel .theia-input {
-    border-color: var(--theia-panelInput-border);
+  border-color: var(--theia-panelInput-border);
 }
 
 #theia-bottom-content-panel .p-DockPanel-handle[data-orientation='horizontal'] {
-    border-left: var(--theia-border-width) solid var(--theia-panel-border);
+  border-left: var(--theia-border-width) solid var(--theia-panel-border);
 }
 
 #theia-bottom-content-panel .p-TabBar {
-    border-top: var(--theia-border-width) solid var(--theia-panel-border);
-    background: inherit;
+  border-top: var(--theia-border-width) solid var(--theia-panel-border);
+  background: inherit;
 }
 
 #theia-bottom-content-panel .p-TabBar-tab {
-    background: inherit;
+  background: inherit;
 }
 
 #theia-bottom-content-panel .p-TabBar-tab:not(.p-mod-current) {
-    color: var(--theia-panelTitle-inactiveForeground);
+  color: var(--theia-panelTitle-inactiveForeground);
 }
 
 #theia-bottom-content-panel .p-TabBar-tab.p-mod-current {
-    color: var(--theia-panelTitle-activeForeground);
-    box-shadow: 0 var(--theia-border-width) 0 var(--theia-panelTitle-activeBorder) inset;
+  color: var(--theia-panelTitle-activeForeground);
+  box-shadow: 0 var(--theia-border-width) 0 var(--theia-panelTitle-activeBorder) inset;
 }
 
 #theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab .theia-tab-icon-label {
-    color: var(--theia-tab-unfocusedInactiveForeground);
+  color: var(--theia-tab-unfocusedInactiveForeground);
 }
 
 #theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
-    color: var(--theia-tab-unfocusedActiveForeground);
+  color: var(--theia-tab-unfocusedActiveForeground);
 }
 
 /*-----------------------------------------------------------------------------
@@ -288,15 +289,15 @@
   visibility: hidden;
 }
 
-.p-TabBar.theia-app-sides > .theia-TabBar-hidden-content .p-TabBar-tab {
+.p-TabBar.theia-app-sides>.theia-TabBar-hidden-content .p-TabBar-tab {
   line-height: var(--theia-private-sidebar-tab-width);
 }
 
-.p-TabBar.theia-app-left > .theia-TabBar-hidden-content .p-TabBar-tabLabel {
+.p-TabBar.theia-app-left>.theia-TabBar-hidden-content .p-TabBar-tabLabel {
   transform: none;
 }
 
-.p-TabBar.theia-app-right > .theia-TabBar-hidden-content .p-TabBar-tabLabel {
+.p-TabBar.theia-app-right>.theia-TabBar-hidden-content .p-TabBar-tabLabel {
   transform: none;
 }
 
@@ -305,29 +306,30 @@
 |----------------------------------------------------------------------------*/
 
 .theia-sidepanel-toolbar {
-    min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
-    display: flex;
-    padding-left: 5px;
-    align-items: center;
-    background-color: var(--theia-sideBar-background);
+  min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
+  display: flex;
+  padding-left: 5px;
+  align-items: center;
+  background-color: var(--theia-sideBar-background);
+  min-width: var(--theia-private-sidebar-sidepanel-width);
 }
 
 .theia-sidepanel-toolbar .theia-sidepanel-title {
-    color: var(--theia-settings-headerForeground);
-    flex: 1;
-    margin-left: 14px;
-    text-transform: uppercase;
-    font-size: var(--theia-ui-font-size0);
+  color: var(--theia-settings-headerForeground);
+  flex: 1;
+  margin-left: 14px;
+  text-transform: uppercase;
+  font-size: var(--theia-ui-font-size0);
 }
 
 .theia-sidepanel-toolbar .p-TabBar-toolbar .item {
-    color: var(--theia-icon-foreground);
+  color: var(--theia-icon-foreground);
 }
 
-.theia-sidepanel-toolbar .p-TabBar-toolbar .item > div{
-    height: 18px;
-    width: 18px;
-    background-repeat: no-repeat;
+.theia-sidepanel-toolbar .p-TabBar-toolbar .item>div {
+  height: 18px;
+  width: 18px;
+  background-repeat: no-repeat;
 }
 
 .noWrapInfo {