post-order line draw improvements

src/components/chart/RungBuilder.vue

@@ -4,15 +4,16 @@
     <div style="min-width: 4em; font-size: larger" :style="colorStyle"
          class="d-flex flex-column align-self-start ml-2">
       <div class="flex-row align-items-center">
-        <v-btn variant="outlined" @click="props.builder.breakout=!props.builder.breakout">{{ name }}</v-btn>
-        <div class="description">{{description}}</div>
+        <v-btn variant="outlined" style="width: 8em"
+               @click="props.builder.breakout=!props.builder.breakout">{{ name }}</v-btn>
+        <div class="description w-100 text-center">{{description}}</div>
       </div>
       <v-text-field type="number" v-model="rungs"
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
                     :color="color" :base-color="color" min="1" :max="MAX_RUNGS"
                     :disabled="rungsDisabled"
-                    style="width: 4.5em;"
+                    style="width: 6.6em;"
       />
     </div>
 
@@ -96,7 +97,6 @@ let lastBuy = null
 watchEffect(()=>{
   if (props.order.buy!==lastBuy) {
     lastBuy = props.order.buy
-    console.log('updating colors')
     props.builder.color=computeDefaultColor()
   }
 })
@@ -332,9 +332,8 @@ function makeModel(index) {
     amount: props.order.amount * alloc,
     amountSymbol: amountSymbol.value,
     textLocation: above ? 'above' : 'below',
-    extraText: !props.builder.breakout ? ' ' :
-        // (above ? '↑ Breakout ↑' : '↓ Breakout ↓')
-        (above ? '▲ Breakout ▲' : '▼ Breakout ▼')
+    breakout: props.builder.breakout,
+    extraText: null,
   }
   setModelValue(result, values.value[index])
   return result