From 9c9a2c630b6f62a0c94f4fd0ecb7dcce9d31cb6d Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Mon, 6 Nov 2023 09:46:10 -0600
Subject: [PATCH] reduce size of bar to fit in CA desktop

---
 src/components/CallRiskScoreBar.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/CallRiskScoreBar.vue b/src/components/CallRiskScoreBar.vue
index 27824a3..14b21c7 100644
--- a/src/components/CallRiskScoreBar.vue
+++ b/src/components/CallRiskScoreBar.vue
@@ -7,6 +7,7 @@ const props = defineProps({
 });
 
 const id = "csrScoreBar";
+const width = 300;
 
 onMounted(() => {
   drawScale(id, d3.interpolateRdYlGn);
@@ -17,7 +18,7 @@ function drawScale(id, interpolator) {
 
   var cScale = d3.scaleSequential().interpolator(interpolator).domain([0, 99]);
 
-  var xScale = d3.scaleLinear().domain([0, 99]).range([0, 360]);
+  var xScale = d3.scaleLinear().domain([0, 99]).range([0, width]);
 
   d3.select("#" + id)
     .selectAll("rect")
@@ -53,21 +54,20 @@ function drawScale(id, interpolator) {
     />
     Call Risk Score is {{ score }}
     <div class="img-overlay-wrap">
-      <svg :id="id" width="360" height="40"></svg>
+      <svg :id="id" width="{{ width }}" height="40"></svg>
     </div>
   </div>
 </template>
 <style>
 .crsContainer {
-  margin: 8px;
-  border-radius: 5px;
-  padding: 11px 16px 11px 12px;
   align-items: flex-start;
-  gap: 8px;
+  border: 2px solid #45b408;
   border-radius: 5px;
   font-family: OpenSans, Ariel, sans-serif;
   font-size: 11px;
-  border: 2px solid #45b408;
+  gap: 8px;
+  margin: 8px;
+  padding: 11px 16px 11px 12px;
 }
 
 .img-overlay-wrap svg {