fix(Spacing): fix padding top with spacing tokens (#7632)

h2. Описание

Сейчас в компоненте `Spacing` при прокидывании в проп `size` значение типа string('s', 'm', 'l' и т.д) и при добавлении children для компонента, не устанавливается паддинг сверху, есть только снизу

h2. Изменения

Поисследовав данную проблема, пришел к выводу, что css выражение с рассчетом паддингов `calc(1px * var(--vkui_internal--Spacing_gap) / 2)` при значении css переменной `--vkui_internal--Spacing_gap` в виде `${число}px` неправильно рассчитывается, то есть получается 0. Скорее всего, это из-за того, что мы умножаем значение на 1px. По крайней мере, если его убрать, то проблема пропадает.
- Убрал умножение на 1px в css
- Чтобы не сломался кейс со значениями типа number, сделал добавление px при прокидывании в css переменную
- Убрал установку `height`, так как при добавлении `padding-block` `height` не нужен
- Поправил тесты, скриншоты

h2. Release notes

h2. Исправление
- Spacing: Поправлен баг с отсутствием верхнего отступа при прокидывании в `size` значение типа `string`

packages/vkui/src/components/Spacing/Spacing.e2e-playground.tsx

@@ -20,6 +20,10 @@ export const SpacingPlayground = (props: ComponentPlaygroundProps) => {
           <Separator />
           <Spacing size={size} />
           <Separator />
+          <Spacing size={size} />
+          <Spacing size={size} style={{ background: '#b0bfb4' }}>
+            <Separator />
+          </Spacing>
         </Div>
       )}
     </ComponentPlayground>

packages/vkui/src/components/Spacing/Spacing.module.css

@@ -2,8 +2,7 @@
   --vkui_internal--Spacing_gap: 0;
 
   position: relative;
-  block-size: var(--vkui_internal--Spacing_gap);
-  padding-block: calc(1px * var(--vkui_internal--Spacing_gap) / 2);
+  padding-block: calc(var(--vkui_internal--Spacing_gap) / 2);
   box-sizing: border-box;
 }
 

packages/vkui/src/components/Spacing/Spacing.test.tsx

@@ -30,13 +30,13 @@ describe('Spacing', () => {
 
   it('should use custom size', () => {
     const h = render(<Spacing size={16} />);
-    expect(h.container.firstElementChild).toHaveStyle(`${CUSTOM_CSS_TOKEN_FOR_USER_GAP}: 16`);
+    expect(h.container.firstElementChild).toHaveStyle(`${CUSTOM_CSS_TOKEN_FOR_USER_GAP}: 16px`);
   });
 
   it('should preserve user style', () => {
     const h = render(<Spacing size={16} style={{ fontSize: 12 }} />);
     expect(h.container.firstElementChild).toHaveStyle(
-      `font-size: 12px; ${CUSTOM_CSS_TOKEN_FOR_USER_GAP}: 16`,
+      `font-size: 12px; ${CUSTOM_CSS_TOKEN_FOR_USER_GAP}: 16px`,
     );
   });
 });

packages/vkui/src/components/Spacing/Spacing.tsx

@@ -34,7 +34,7 @@ export const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): Reac
     <RootComponent
       {...restProps}
       style={{
-        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size }),
+        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: `${size}px` }),
         ...style,
       }}
       baseClassName={classNames(