fix: fix components view with global box-sizing: border-box (#8268)

Author: EldarMuhamethanov

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

@@ -18,12 +18,14 @@ export const CustomScrollViewWithBothScrollsPlayground = (props: ComponentPlaygr
             borderRadius: 10,
             border: '1px solid #000',
             padding: 10,
+            boxSizing: 'content-box',
           }}
         >
           <CustomScrollView {...props} enableHorizontalScroll style={{ height: 300, width: 600 }}>
             <Div
               style={{
                 width: 1440,
+                boxSizing: 'content-box',
               }}
             >
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a

packages/vkui/src/components/CustomScrollView/CustomScrollView.stories.tsx

@@ -13,6 +13,7 @@ const Wrapper = (Story: PartialStoryFn<ReactRenderer>) => (
       width: '100%',
       maxWidth: '600px',
       maxHeight: '300px',
+      boxSizing: 'content-box',
     }}
   >
     <Story />
@@ -36,6 +37,7 @@ export const Playground: Story = {
       <Div
         style={{
           width: 1440,
+          boxSizing: 'content-box',
         }}
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a

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

@@ -79,7 +79,9 @@ export const FormItemPlayground = (props: ComponentPlaygroundProps) => {
         },
       ]}
     >
-      {(props: FormItemProps) => <FormItem {...props} style={{ maxWidth: '300px' }} />}
+      {(props: FormItemProps) => (
+        <FormItem {...props} style={{ maxWidth: '300px', boxSizing: 'content-box' }} />
+      )}
     </ComponentPlayground>
   );
 };
@@ -128,7 +130,7 @@ export const FormItemTopAsidePlayground = (props: ComponentPlaygroundProps) => {
               {topAside}
             </FormItem.Top>
           }
-          style={{ maxWidth: '300px' }}
+          style={{ maxWidth: '300px', boxSizing: 'content-box' }}
         />
       )}
     </ComponentPlayground>

packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -12,6 +12,7 @@
 }
 
 .body {
+  box-sizing: content-box;
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -18,6 +18,11 @@
   box-shadow: none;
 }
 
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.host :global(.vkuiIcon) {
+  box-sizing: content-box;
+}
+
 .sizeYCompact {
   block-size: 44px;
 }

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

@@ -5,7 +5,7 @@ export const MarkPlayground = (props: ComponentPlaygroundProps) => {
   return (
     <ComponentPlayground {...props}>
       {(props: MarkProps) => (
-        <div style={{ width: 300, padding: 10, lineHeight: '1.6' }}>
+        <div style={{ width: 300, padding: 10, boxSizing: 'content-box', lineHeight: '1.6' }}>
           Ведь тебе нужен <Mark {...props}>Марк</Mark>, чтоб <Mark {...props}>получился марк</Mark>
           етинг
         </div>

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

@@ -31,6 +31,7 @@ export const OnboardingTooltipPlayground = (props: ComponentPlaygroundProps) =>
       {(props: OnboardingTooltipProps) => (
         <OnboardingTooltipContainer
           style={{
+            boxSizing: 'content-box',
             minWidth: '300px',
             height: '100px',
             position: 'relative',

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

@@ -35,6 +35,7 @@ export const PanelPlayground = (props: ComponentPlaygroundProps) => {
         <div
           style={{
             height: '200px',
+            boxSizing: 'content-box',
             overflow: 'auto',
             transform: 'translateZ(0)',
             // чтобы было проще видеть разницу скриншотов
@@ -66,7 +67,7 @@ export const PanelModePlayground = (props: ComponentPlaygroundProps) => {
     >
       {(props: PanelProps) => (
         <Panel {...props}>
-          <div style={{ padding: '8px' }}>
+          <div style={{ padding: '8px', boxSizing: 'content-box' }}>
             <Group mode={props.mode}>
               <div style={{ minHeight: '100px', minWidth: '100px' }}>
                 Text within Group with mode {props.mode}

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

@@ -10,6 +10,11 @@
   box-shadow: none;
 }
 
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.host :global(.vkuiIcon) {
+  box-sizing: content-box;
+}
+
 .host[disabled] {
   opacity: 0.6;
 }

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

@@ -9,7 +9,7 @@ export const PullToRefreshPlayground = (
   return (
     <ComponentPlayground {...playgroundProps} platform="vkcom">
       {({ ...props }: PullToRefreshProps) => (
-        <Div style={{ width: '300px', paddingLeft }}>
+        <Div style={{ width: '300px', paddingLeft, boxSizing: 'content-box' }}>
           <PullToRefresh {...props}>
             <div
               style={{
@@ -44,7 +44,7 @@ export const PullToRefreshChildrenPositionPlayground = (props: ComponentPlaygrou
   return (
     <ComponentPlayground {...props} platform="vkcom">
       {({ ...props }: PullToRefreshProps) => (
-        <Div style={{ width: '300px', height: '500px', display: 'flex' }}>
+        <Div style={{ width: '300px', height: '500px', display: 'flex', boxSizing: 'content-box' }}>
           <PullToRefresh {...props}>
             <div
               style={{

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

@@ -1,4 +1,5 @@
 .host {
+  box-sizing: content-box;
   display: flex;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;

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

@@ -32,6 +32,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .before > :global(.vkuiIcon) {
+  box-sizing: content-box;
   padding-inline-end: var(--vkui--spacing_size_xs);
 }
 
@@ -125,6 +126,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .after > :global(.vkuiIcon) {
+  box-sizing: content-box;
   padding-inline-start: var(--vkui--spacing_size_m);
 }
 

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

@@ -113,6 +113,7 @@ export const SliderPlaygroundForTooltipTest = (
         <div
           style={{
             padding: '80px 30px 30px',
+            boxSizing: 'content-box',
             width: '320px',
             height: 'auto',
           }}

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

@@ -8,6 +8,7 @@ import { Spacing, type SpacingProps } from './Spacing';
 const sizes = Object.keys(spacingSizeClassNames) as SpacingSize[];
 const divStyle: React.CSSProperties & CSSCustomProperties = {
   'width': 100,
+  'boxSizing': 'content-box',
   '--my-custom-var': '8px',
 };
 

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

@@ -84,6 +84,7 @@
 }
 
 .chevronIcon {
+  box-sizing: content-box;
   margin-block-start: 1px; /* Смещает иконку относительно текста */
   margin-inline-start: 8px;
   color: var(--vkui--color_icon_secondary);

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

@@ -3,6 +3,7 @@
 }
 
 .content {
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: space-between;

packages/vkui/src/components/Typography/EllipsisText/EllipsisText.e2e-playground.tsx

@@ -12,7 +12,7 @@ export const EllipsisTextPlayground = (props: ComponentPlaygroundProps) => {
       ]}
     >
       {(props: EllipsisTextProps) => (
-        <div style={{ width: 200, padding: 20 }}>
+        <div style={{ width: 200, padding: 20, boxSizing: 'content-box' }}>
           <EllipsisText {...props}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
             incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud