diff --git a/dashboards-observability/public/components/metrics/index.tsx b/dashboards-observability/public/components/metrics/index.tsx
index e44b96d92..5b2e52eb7 100644
--- a/dashboards-observability/public/components/metrics/index.tsx
+++ b/dashboards-observability/public/components/metrics/index.tsx
@@ -108,6 +108,10 @@ export const Home = ({ http, chrome, parentBreadcrumb, renderProps, pplService }
     'col-md-12': isSidebarClosed,
   });
 
+  const sidebarClassName = classNames({
+    closed: isSidebarClosed,
+  });
+
   return (
     <>
       <Route
@@ -135,7 +139,9 @@ export const Home = ({ http, chrome, parentBreadcrumb, renderProps, pplService }
                   resolutionSelectId={resolutionSelectId}
                 />
                 <div className="dscAppContainer">
-                  <div className="col-md-3 dscSidebar__container dscCollapsibleSidebar">
+                  <div
+                    className={`col-md-3 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
+                  >
                     <div className="">
                       {!isSidebarClosed && <Sidebar http={http} pplService={pplService} />}
                       <EuiButtonIcon
diff --git a/dashboards-observability/public/components/metrics/sidebar/sidebar.scss b/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
index 5c6e80a4e..b8217d522 100644
--- a/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
+++ b/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
@@ -145,5 +145,13 @@
 }
 
 .metricsList {
-  overflow-x:auto;
+  line-height:normal;
+  margin-top:10px;
+}
+
+.metricName {
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  margin-bottom:10px;
 }
diff --git a/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx b/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
index bf4a432c4..f39300f9e 100644
--- a/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
@@ -60,8 +60,14 @@ export const Sidebar = (props: ISidebarProps) => {
         >
           <ul className="metricsList">
             {recentlyCreatedMetrics.map((metric: any) => (
-              <li key={metric.id}>
-                <EuiLink onClick={() => handleAddMetric(metric)}>{metric.name}</EuiLink>
+              <li className="metricName" key={metric.id}>
+                <EuiLink
+                  className="metricName eui-textTruncate"
+                  title={metric.name}
+                  onClick={() => handleAddMetric(metric)}
+                >
+                  {metric.name}
+                </EuiLink>
               </li>
             ))}
           </ul>
@@ -80,7 +86,13 @@ export const Sidebar = (props: ISidebarProps) => {
           <ul className="metricsList">
             {selectedMetrics.map((metric: any) => (
               <li key={metric.id}>
-                <EuiLink onClick={() => handleRemoveMetric(metric)}>{metric.name}</EuiLink>
+                <EuiLink
+                  className="metricName eui-textTruncate"
+                  title={metric.name}
+                  onClick={() => handleRemoveMetric(metric)}
+                >
+                  {metric.name}
+                </EuiLink>
               </li>
             ))}
           </ul>
@@ -99,7 +111,13 @@ export const Sidebar = (props: ISidebarProps) => {
           <ul className="metricsList">
             {availableMetrics.slice(0, 100).map((metric: any) => (
               <li key={metric.id}>
-                <EuiLink onClick={() => handleAddMetric(metric)}>{metric.name}</EuiLink>
+                <EuiLink
+                  className="metricName eui-textTruncate"
+                  title={metric.name}
+                  onClick={() => handleAddMetric(metric)}
+                >
+                  {metric.name}
+                </EuiLink>
               </li>
             ))}
           </ul>