diff --git a/src/renderer/components/badge/badge.scss b/src/renderer/components/badge/badge.scss
index 513b7e5d78..0d7412db53 100644
--- a/src/renderer/components/badge/badge.scss
+++ b/src/renderer/components/badge/badge.scss
@@ -1,30 +1,24 @@
 .Badge {
+  position: relative;
   display: inline-block;
   background: $colorVague;
   color: $textColorSecondary;
   border-radius: $radius;
   padding: .2em .4em;
-  white-space: nowrap;
   max-width: 100%;
-  position: relative;
-  cursor: pointer;
 
-  &:hover {
+  &.interactive:hover {
     background-color: $mainBackground;
+    cursor: pointer;
+  }
+
+  &:not(.isExpanded) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &.small {
     font-size: $font-size-small;
   }
-
-  .label-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.isExpanded {
-      overflow: unset;
-      text-overflow: unset;
-      white-space: normal;
-    }
-  }
 }
diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx
index 73d1275293..40d79823c4 100644
--- a/src/renderer/components/badge/badge.tsx
+++ b/src/renderer/components/badge/badge.tsx
@@ -1,44 +1,51 @@
 import "./badge.scss"
 
 import React from "react";
+import { computed, observable } from "mobx";
+import { observer } from "mobx-react";
 import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
-import { observer } from "mobx-react";
 import { autobind } from "../../utils";
-import { observable } from "mobx";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
   label?: React.ReactNode;
-  isExpanded?: boolean; // by default: false (minimized)
+  isExpanded?: boolean; // always force state to this value
 }
 
 @withTooltip
 @observer
 export class Badge extends React.Component<BadgeProps> {
+  @observable.ref elem: HTMLElement;
   @observable isExpanded = false;
 
+  @computed get isExpandable() {
+    return this.elem?.clientWidth < this.elem?.scrollWidth;
+  }
+
   @autobind()
-  onMouseRelease() {
-    const textSelected = document.getSelection().toString().trim() !== "";
-    if (textSelected) return;
-    this.isExpanded = this.props.isExpanded /*force to use state from outside*/ ?? !this.isExpanded /*toggle*/;
+  onMouseUp(evt: React.MouseEvent) {
+    const isTextSelected = !!document.getSelection().toString().trim();
+    if (!this.isExpandable || isTextSelected) return; // no action required
+    this.isExpanded = !this.isExpanded;
+  }
+
+  @autobind()
+  bindRef(elem: HTMLElement) {
+    this.elem = elem;
   }
 
   render() {
     const { className, label, small, children, isExpanded, ...elemProps } = this.props;
     const classNames = cssNames("Badge", className, {
       small: small,
-    })
-    const labelClass = cssNames("label-content", {
-      isExpanded: this.isExpanded,
+      interactive: this.isExpandable,
+      isExpanded: isExpanded ?? this.isExpanded,
     })
     return (
-      <div {...elemProps} className={classNames}>
-        <div className={labelClass} onMouseUp={this.onMouseRelease}>
-          {label}
-          {children}
-        </div>
+      <div {...elemProps} className={classNames} onMouseUp={this.onMouseUp} ref={this.bindRef}>
+        {label}
+        {children}
       </div>
     )
   }