fix(Tabs): padding and image props (#77)

Author: Juli Ovechkina

src/blocks/Tabs/Tabs.scss

@@ -10,12 +10,11 @@ $block: '.#{$ns}tabs-block';
         margin-bottom: $indentSM;
 
         &_centered {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            margin-left: auto;
-            margin-right: auto;
             text-align: center;
+
+            & > * {
+                margin: 0 auto;
+            }
         }
     }
 

src/components/Image/Image.scss

@@ -2,16 +2,12 @@ import React, {CSSProperties, MouseEventHandler, useContext, useState, Fragment}
 import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {BREAKPOINTS} from '../../constants';
 import {ImageDeviceProps, ImageObjectProps} from '../../models';
-import {block} from '../../utils';
-
-import './Image.scss';
-
-const b = block('image');
 
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
+    containerClassName?: string;
 }
 
 const checkWebP = (src: string) => {
@@ -20,7 +16,18 @@ const checkWebP = (src: string) => {
 
 const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const {src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick} = props;
+    const {
+        src,
+        alt,
+        disableCompress,
+        tablet,
+        desktop,
+        mobile,
+        style,
+        className,
+        onClick,
+        containerClassName,
+    } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
 
     const imageSrc = src || desktop;
@@ -37,7 +44,7 @@ const Image = (props: ImageProps) => {
         imgLoadingError;
 
     return (
-        <picture className={b()}>
+        <picture className={containerClassName}>
             {mobile && (
                 <Fragment>
                     {!disableWebp && (

src/components/Image/Image.tsx

@@ -22,6 +22,11 @@ $block: '.#{$ns}VideoBlock';
         height: 100%;
         object-fit: cover;
         display: block;
+
+        &-wrapper {
+            height: 100%;
+            width: 100%;
+        }
     }
 
     &__button {

src/components/VideoBlock/VideoBlock.scss

@@ -125,7 +125,11 @@ const VideoBlock = (props: VideoBlockProps) => {
         <div className={b(null, className)} ref={ref} style={{height: currentHeight}}>
             {previewImg && !hidePreview && (
                 <div className={b('preview')} onClick={onPreviewClick}>
-                    <Image src={previewImg} className={b('image')} />
+                    <Image
+                        src={previewImg}
+                        className={b('image')}
+                        containerClassName={b('image-wrapper')}
+                    />
                     {playButton || (
                         <button className={b('button')}>
                             <Icon className={b('icon')} data={PlayVideo} size={24} />