diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
index 05dbabc0481..20b0134418a 100644
--- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
@@ -3,13 +3,13 @@
 
     <t t-name="web.ProgressBarField" owl="1">
         <t t-if="!state.isEditing">
-            <div class="o_progressbar" t-on-click="onClick">
+            <div class="o_progressbar w-100" t-on-click="onClick">
                 <div t-if="props.title" class="o_progressbar_title"><t t-esc="props.title"/></div>
                 <div class="o_progress" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
                     <div class="o_progressbar_complete" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
                 </div>
                 <t t-if="props.isPercentage">
-                    <span class="o_progressbar_value" t-esc="formatCurrentValue(true) + '%'"/>
+                    <div class="o_progressbar_value" t-esc="formatCurrentValue(true) + '%'"/>
                 </t>
                 <t t-else="">
                     <div class="o_progressbar_value" t-esc="formatCurrentValue(true) + ' / ' + formatMaxValue(true)"/>
@@ -17,7 +17,7 @@
             </div>
         </t>
         <t t-else="">
-            <div class="o_progressbar d-flex" t-ref="numpadDecimal" t-on-click="onClick">
+            <div class="o_progressbar w-100 d-flex" t-ref="numpadDecimal">
                 <div t-if="props.title" class="o_progressbar_title"><t t-esc="props.title"/></div>
                 <div class="o_progress" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
                     <div class="o_progressbar_complete" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>