Merge pull request #805 from Lemoncode/feature/fix-input-stepper-align-right-number

brauliodiez · web-flow · commit ef590f4d3a51 · 2026-04-15T14:01:37.000+02:00
Feature/fix input stepper align right number
diff --git a/public/rich-components/input-stepper.svg b/public/rich-components/input-stepper.svg
@@ -3,7 +3,7 @@
   <rect x="10" y="10" width="60" height="30" style="fill:white;stroke:black;stroke-width:2"/>
 
   <!-- Texto del input -->
-  <text x="60" y="30" font-family="Arial" font-size="16" fill="black" text-anchor="end">0</text>
+  <text x="15" y="30" font-family="Arial" font-size="16" fill="black" text-anchor="start">0</text>
 
   <!-- Botón de incremento (flecha arriba) -->
   <rect x="70" y="10" width="20" height="15" style="fill:lightgray;stroke:black;stroke-width:2"/>
@@ -12,4 +12,4 @@
   <!-- Botón de decremento (flecha abajo) -->
   <rect x="70" y="25" width="20" height="15" style="fill:lightgray;stroke:black;stroke-width:2"/>
   <text x="77" y="37" font-family="Arial" font-size="14" fill="black">▼</text>
-</svg>
+</svg>
diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
@@ -66,14 +66,14 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
       {/* Texto del input */}
       <Text
-        x={0} // Alinear a la derecha
+        x={INPUT_SHAPE.DEFAULT_PADDING}
         y={height / 2 - 8} // Centrar verticalmente
-        width={restrictedWidth}
+        width={restrictedWidth - INPUT_SHAPE.DEFAULT_PADDING * 2}
         text={text}
         fontFamily="Arial"
         fontSize={16}
         fill={textColor}
-        align="center"
+        align="left"
         wrap="none"
       />
 
