[@mantine/prism] Fix copy icon interfering with code (mantinedev#2171)

nmay231 · Aug 28, 2022 · 3f3e5c4 · 3f3e5c4
1 parent d930fe3
commit 3f3e5c4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/mantine-prism/src/Prism/Prism.story.tsx b/src/mantine-prism/src/Prism/Prism.story.tsx
@@ -46,3 +46,11 @@ export const WithTabs = () => (
     </Prism.Tabs>
   </div>
 );
+
+export const LargeLine = () => (
+  <Prism language="javascript" withLineNumbers>
+    Line that is so large that it will cause overflow Lorem ipsum dolor sit amet consectetur, Line
+    that is so large that it will cause overflow Lorem ipsum dolor sit amet consectetur, Line that
+    is so large that it will cause overflow Lorem ipsum dolor sit amet consectetur,
+  </Prism>
+);
diff --git a/src/mantine-prism/src/Prism/Prism.styles.ts b/src/mantine-prism/src/Prism/Prism.styles.ts
@@ -34,6 +34,10 @@ export default createStyles(
       right: theme.dir === 'ltr' ? theme.spacing.xs : 'unset',
       left: theme.dir === 'rtl' ? theme.spacing.xs : 'unset',
       zIndex: 2,
+
+      '&, &:hover': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+      },
     },
 
     line: {