Issues getting reveler scale to auto expand into white space.

[LurkAndLoiter]

I'm trying to get a row with 2 boxes. One is a reveler box that contains a label that reveals a scale on hover. the second box is just a label with text ideally the two states should look like:
:normal

:hover

The below code is able to accomplish the desired functionality but ends up voiding both transition and duration from the revealer.

This is caused by :hexpand true on the revealer. Removing this no longer voids transition and duration however, I could not find a way to get the scale to autofill the remainder of redcol.

Alternatives I have tried.

reveler :hexpand false

scale :width "100%"

scale :width "100%" :hexpand true

Hoping a new pair of eyes might see something I am missing.

test.yuck

(defwindow TestPanel
  :monitor 1
  :stacking "fg"
  :geometry (geometry :width 500)
  (_testing))

(defwidget _testing []
  (box 
    :class "window"
    :space-evenly false
    :orientation "v"
    (box 
      :class "bluerow"
      :space-evenly false
      (box 
        :class "redcol"
        :hexpand true 
        :halign _test_exp
        (eventbox
          :onhover 'eww update _test=true && eww update _test_exp="fill"'
          :onhoverlost 'eww update _test_exp="start" && eww update _test=false'
          (box 
            :space-evenly false 
            :spacing 5
            (label :text "RevealerTxt")
            (revealer
              :hexpand true
              :transition "slideleft"
              :duration "1000ms"
              :reveal _test
              (scale
                :value 50 
                :min 0
                :max 100)))))
      (box 
        :class "greencol"
        :halign "end"
        (label :text "MoreData")))))
(defvar _test false)
(defvar _test_exp "start")

test.scss

box {
  all: unset;
  &.window {
    background-color: #000000;
    padding: 10;
  }
  &.bluerow {
    background-color: rgba(0,0,255,1);
    transition: all 1.0s;
  }
  &.redcol {
    background-color: rgba(255,0,0,0.5);
  }
  &.greencol {
    background-color: rgba(0,255,0,0.5);
  }
}
trough highlight {
  all:unset;
  background-color: rgba(255,0,0,1);
}

scale trough {
  all: unset;
  background-color: rgba(0,255,0,1);
  min-height: 8px;
  min-width: 8px;
  margin: 0px 10px 0px 5px;
}

slider{
  all: unset;
  border-radius: 10px;
  background-color: rgba(0,0,255,1);
  margin: -7px -7px -7px -7px;
}