🐛Fix automatic rounding of prism blocks (tinacms#2789)

Fix automatic rounding of prism blocks
kldavis4 · Jan 24, 2025 · 55e4ce5 · 55e4ce5
1 parent 9191074
commit 55e4ce5
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/components/blocks/Features/Features.tsx b/components/blocks/Features/Features.tsx
@@ -129,7 +129,7 @@ export function FeatureBlock({ data, index }) {
                   }}
                 >
                   <CodeWrapper>
-                    <div className="[&>pre]:!bg-transparent [&>pre]:!border-none">
+                    <div className="[&>pre]:!bg-transparent [&>pre]:!border-none rounded-xl">
                       <Prism
                         lang={
                           data.media[0].language

diff --git a/components/blocks/Story/Story.tsx b/components/blocks/Story/Story.tsx
@@ -224,7 +224,7 @@ const Pane = ({ data, position, ...props }) => {
               }}
             >
               <CodeWrapper>
-                <div className="[&>pre]:!bg-transparent [&>pre]:!border-none">
+                <div className="[&>pre]:!bg-transparent [&>pre]:!border-none rounded-xl">
                   <Prism
                     lang={
                       data.file.language ? data.file.language : 'javascript'

diff --git a/components/tinaMarkdownComponents/docAndBlogComponents.tsx b/components/tinaMarkdownComponents/docAndBlogComponents.tsx
@@ -314,7 +314,7 @@ export const docAndBlogComponents: Components<{
   // @ts-ignore TODO: fix this in TinaCMS
   code_block: ({ value, lang, children }) => {
     return (
-      <div className="py-3 word-break white-space overflow-x-hidden">
+      <div className="py-3 word-break white-space overflow-x-hidden rounded-xl">
         <Prism
           value={children || value || ''}
           lang={lang || 'jsx'}

diff --git a/components/ui/GraphQLQueryResponseTabs.tsx b/components/ui/GraphQLQueryResponseTabs.tsx
@@ -46,7 +46,7 @@ export const GraphQLQueryResponseTabs = ({ ...props }) => {
         <div
             className="h-fit grid grid-cols-1 w-full">
             <div
-                className={containerStyling} 
+                className={`${containerStyling} rounded-b-xl`} 
                 style={{
                     zIndex: isQuery ? 5 : 1,
                 }}>
@@ -62,7 +62,7 @@ export const GraphQLQueryResponseTabs = ({ ...props }) => {
                 {overlay}
             </div>
             <div
-                className={containerStyling} 
+                className={`${containerStyling} rounded-b-xl`} 
                 style={{
                     zIndex: isQuery ? 1 : 5,
                 }}>

diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -81,4 +81,8 @@
   body {
     @apply bg-background text-foreground;
  }
-}
+}
+
+pre.prism-code.language-json {
+  border-radius: 0 !important;
+}