From f23bdcffb141ccf029a2ba5b6c92537d6536d138 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Thu, 7 May 2020 22:01:15 +0200
Subject: [PATCH] fix for value widget: more elegant solution for display
 issues #192

---
 src/styles/widgets.css      |  2 +-
 src/widget/widgets/value.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 5d92aa8..3d3455d 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -249,7 +249,7 @@ span.signal-unit::after {
     width: 100%;
     height: 100%;
     display: flex;
-    flex: none;
+    justify-content: center;
 
     word-wrap: break-word;
 }
diff --git a/src/widget/widgets/value.js b/src/widget/widgets/value.js
index 8951d80..f143cd0 100644
--- a/src/widget/widgets/value.js
+++ b/src/widget/widgets/value.js
@@ -69,14 +69,14 @@ class WidgetValue extends Component {
 
   render() {
     let value_to_render = Number(this.state.value);
-    let value_width = this.props.widget.customProperties.textSize*0.55* (this.state.value.length +2);
-    let unit_width = this.props.widget.customProperties.textSize*2;
+    let value_width = this.props.widget.customProperties.textSize*(value_to_render < 1000 ? (2):(3));
+    let unit_width = this.props.widget.customProperties.textSize*(this.state.unit.length + 0.7);
     return (
       <div className="single-value-widget">
-        <strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px'}}>{this.props.widget.name}</strong>
-        <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px',width: value_width }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
+        <strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: '1 1 auto'}}>{this.props.widget.name}</strong>
+        <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none', width: value_width }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
         {this.props.widget.customProperties.showUnit &&
-          <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', width: unit_width}}>[{this.state.unit}]</span>
+          <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none',  width: unit_width}}>[{this.state.unit}]</span>
         }    
       </div>
     );