fix(Popover): blured story example TET-517

VirtusLab · Nov 9, 2023 · 3a14e73 · 3a14e73
1 parent f565c91
commit 3a14e73
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
   tags: ['autodocs'],
   args: {
     content: (
-      <tet.div display="flex" gap="12px" alignItems="center">
+      <tet.div display="flex" gap="12px" alignItems="center" w="324px">
         <Avatar
           appearance="image"
           img={{
@@ -39,6 +39,7 @@ const meta = {
           size="small"
           beforeIcon="20-check-large"
           label="Following"
+          ml="auto"
         />
       </tet.div>
     ),

diff --git a/src/components/Popover/Popover.styles.ts b/src/components/Popover/Popover.styles.ts
@@ -18,63 +18,63 @@ export const defaultConfig = {
     top: {
       align: {
         start: {
-          transform: 'translate(0%, -100%)',
+          transform: 'translate(0%, -100%) translateZ(0)',
           left: '50%',
         },
         center: {
-          transform: 'translate(-50%, -100%)',
+          transform: 'translate(-50%, -100%) translateZ(0)',
           left: '50%',
         },
         end: {
-          transform: 'translate(-100%, -100%)',
+          transform: 'translate(-100%, -100%) translateZ(0)',
           left: '50%',
         },
       },
     },
     bottom: {
       align: {
         start: {
-          transform: 'translate(0%, 100%)',
+          transform: 'translate(0%, 100%) translateZ(0)',
           left: '50%',
         },
         center: {
-          transform: 'translate(-50%, 100%)',
+          transform: 'translate(-50%, 100%) translateZ(0)',
           left: '50%',
         },
         end: {
-          transform: 'translate(-100%, 100%)',
+          transform: 'translate(-100%, 100%) translateZ(0)',
           left: '50%',
         },
       },
     },
     left: {
       align: {
         start: {
-          transform: 'translate(-100%, 0%)',
+          transform: 'translate(-100%, 0%) translateZ(0)',
           top: '50%',
         },
         center: {
-          transform: 'translate(-100%, -50%)',
+          transform: 'translate(-100%, -50%) translateZ(0)',
           top: '50%',
         },
         end: {
-          transform: 'translate(-100%, -100%)',
+          transform: 'translate(-100%, -100%) translateZ(0)',
           top: '50%',
         },
       },
     },
     right: {
       align: {
         start: {
-          transform: 'translate(100%, 0%)',
+          transform: 'translate(100%, 0%) translateZ(0)',
           top: '50%',
         },
         center: {
-          transform: 'translate(100%, -50%)',
+          transform: 'translate(100%, -50%) translateZ(0)',
           top: '50%',
         },
         end: {
-          transform: 'translate(100%, -100%)',
+          transform: 'translate(100%, -100%) translateZ(0)',
           top: '50%',
         },
       },