From 0d1b867dbe74af225af0e18a41ef0ab153dc18d1 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 26 Jun 2023 17:18:16 -0700
Subject: fixed padding on syntax highlihgting
---
extension/react-app/src/components/CodeBlock.tsx | 29 ++++++++++++------------
1 file changed, 15 insertions(+), 14 deletions(-)
(limited to 'extension/react-app/src/components/CodeBlock.tsx')
diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index 9438ab23..98760fbd 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -13,20 +13,19 @@ const StyledPre = styled.pre`
border: 0.5px solid gray;
border-radius: ${defaultBorderRadius};
background-color: ${secondaryDark};
- padding: 8px;
- padding-top: 14px;
- padding-bottom: 16px;
+ position: relative;
+`;
+
+const CopyButtonDiv = styled.div`
+ position: absolute;
+ top: 4px;
+ right: 4px;
`;
const StyledCopyButton = styled.button<{ visible: boolean }>`
- /* position: relative; */
- float: right;
border: none;
- background-color: ${secondaryDark};
+ background-color: transparent;
cursor: pointer;
- padding: 0;
- /* margin: 4px; */
- margin-top: -6px;
visibility: ${(props) => (props.visible ? "visible" : "hidden")};
`;
@@ -77,11 +76,13 @@ function CodeBlock(props: { language?: string; children: string }) {
setHovered(false);
}}
>
- <CopyButton
- visible={hovered}
- textToCopy={(props.children as any).props.children[0]}
- />
- <StyledCode>{props.children}</StyledCode>
+ <CopyButtonDiv>
+ <CopyButton
+ visible={hovered}
+ textToCopy={(props.children as any).props.children[0]}
+ />
+ </CopyButtonDiv>
+ <StyledCode language={props.language}>{props.children}</StyledCode>
</StyledPre>
);
}
--
cgit v1.2.3-70-g09d2