diff --git a/client/src/components/Sidebar/SidebarHead.js b/client/src/components/Sidebar/SidebarHead.js
index f35d06c35..1d5ec76ec 100644
--- a/client/src/components/Sidebar/SidebarHead.js
+++ b/client/src/components/Sidebar/SidebarHead.js
@@ -7,7 +7,7 @@ import { compose, firstLettersArgs } from 'utils';
// Popover modifiers.
const POPOVER_MODIFIERS = {
- offset: { offset: '20, 8' },
+ offset: { offset: '28, 8' },
};
/**
@@ -24,6 +24,7 @@ function SidebarHead({
diff --git a/client/src/style/containers/Dashboard/Sidebar.scss b/client/src/style/containers/Dashboard/Sidebar.scss
index 783fdd0a5..e4fde6c17 100644
--- a/client/src/style/containers/Dashboard/Sidebar.scss
+++ b/client/src/style/containers/Dashboard/Sidebar.scss
@@ -54,6 +54,7 @@
padding: 0;
min-height: auto;
min-width: auto;
+ max-width: 100%;
font-weight: 600;
outline: 0;
font-size: 15px;
@@ -69,16 +70,26 @@
}
.bp3-button-text {
margin-right: 4px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ display: block;
}
svg {
fill: rgba(255, 255, 255, 0.3);
}
}
+ .bp3-popover-wrapper,
+ .bp3-popover-target{
+ max-width: 100%;
+ display: inline-block;
+ }
+
.subtitle {
display: block;
font-size: 12px;
- margin-top: 6px;
+ margin-top: 8px;
color: rgba(255, 255, 255, 0.6);
}
}