Fix border radius for tabs and code-blocks when using straight corners (#163)

* Fix border radius for tabs and code-blocks when using straight corners

* Format

src/app/[spaceId]/globals.css

@@ -18,7 +18,11 @@
         --light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 72%);
 
         --dark-1: color-mix(in srgb, rgb(var(--primary-base-100)), rgb(1 1 1) 96%);
-        --dark-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-300)), rgb(var(--dark-base)) 94.5%);
+        --dark-DEFAULT: color-mix(
+            in srgb,
+            rgb(var(--primary-base-300)),
+            rgb(var(--dark-base)) 94.5%
+        );
         --dark-2: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 92%);
         --dark-3: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(25 25 25) 91%);
         --dark-4: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 64%);

src/components/DocumentView/CodeBlock/CodeBlock.tsx

@@ -25,7 +25,11 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
     const fullWidth = block.data.fullWidth;
 
     const fullWidthStyle = fullWidth ? 'max-w-4xl' : 'max-w-3xl';
-    const titleRoundingStyle = title ? ['rounded-md', 'rounded-ss-none'] : ['rounded-md'];
+    const titleRoundingStyle = [
+        'rounded-md',
+        'straight-corners:rounded-sm',
+        title ? 'rounded-ss-none' : null,
+    ];
 
     return (
         <div className={tcls('group/codeblock', 'grid', 'grid-flow-col', style, fullWidthStyle)}>
@@ -51,6 +55,7 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
                             'justify-center',
                             'bg-light-2',
                             'rounded-t',
+                            'straight-corners:rounded-t-s',
                             'px-3',
                             'py-2',
                             'dark:bg-dark-2',

src/components/DocumentView/Tabs/DynamicTabs.tsx

@@ -23,6 +23,7 @@ export function DynamicTabs(props: {
         <div
             className={tcls(
                 'rounded-lg',
+                'straight-corners:rounded-sm',
                 'ring-1',
                 'ring-inset',
                 'ring-dark/3',

src/components/Footer/Footer.tsx

@@ -26,10 +26,29 @@ export function Footer(props: {
                 'dark:bg-dark-2',
             )}
         >
-            <div className={tcls('flex', 'flex-col', CONTAINER_STYLE, 'py-6', 'md:flex-row', 'gap-6')}>
+            <div
+                className={tcls(
+                    'flex',
+                    'flex-col',
+                    CONTAINER_STYLE,
+                    'py-6',
+                    'md:flex-row',
+                    'gap-6',
+                )}
+            >
                 <div className={tcls('flex-1', 'flex', 'flex-col', 'gap-6')}>
                     {customization.footer.logo || customization.footer.groups?.length > 0 ? (
-                        <div className={tcls('flex', 'flex-col', 'gap-10', 'sm:gap-20', 'sm:flex-row', 'items-center', 'flex-wrap')}>
+                        <div
+                            className={tcls(
+                                'flex',
+                                'flex-col',
+                                'gap-10',
+                                'sm:gap-20',
+                                'sm:flex-row',
+                                'items-center',
+                                'flex-wrap',
+                            )}
+                        >
                             {customization.footer.logo ? (
                                 <div>
                                     <Image
@@ -45,7 +64,13 @@ export function Footer(props: {
                                                 : null,
                                         }}
                                         priority="lazy"
-                                        style={['h-10', 'md:h-24', 'max-w-full', 'sm:max-w-80', 'object-contain']}
+                                        style={[
+                                            'h-10',
+                                            'md:h-24',
+                                            'max-w-full',
+                                            'sm:max-w-80',
+                                            'object-contain',
+                                        ]}
                                         sizes={[
                                             {
                                                 width: 320,

src/components/Footer/FooterLinksGroup.tsx

@@ -11,7 +11,17 @@ export function FooterLinksGroup(props: {
     const { group, context } = props;
 
     return (
-        <div className={tcls('flex', 'flex-col', 'gap-3', 'items-center', 'text-center', 'sm:items-start', 'sm:text-start')}>
+        <div
+            className={tcls(
+                'flex',
+                'flex-col',
+                'gap-3',
+                'items-center',
+                'text-center',
+                'sm:items-start',
+                'sm:text-start',
+            )}
+        >
             <p className={tcls('text-base', 'font-medium')}>{group.title}</p>
             {group.links.map((link, index) => {
                 return <FooterLink key={index} link={link} context={context} />;

src/components/PageBody/PageBody.tsx

@@ -25,14 +25,7 @@ export function PageBody(props: {
     context: ContentRefContext;
     withPageFeedback: boolean;
 }) {
-    const {
-        space,
-        customization,
-        context,
-        page,
-        document,
-        withPageFeedback,
-    } = props;
+    const { space, customization, context, page, document, withPageFeedback } = props;
 
     const asFullWidth = document ? hasFullWidthBlock(document) : false;
     const language = getSpaceLanguage(customization);

src/components/TableOfContents/TableOfContents.tsx

@@ -24,15 +24,7 @@ export function TableOfContents(props: {
     header?: React.ReactNode;
     withHeaderOffset: boolean;
 }) {
-    const {
-        space,
-        customization,
-        pages,
-        ancestors,
-        header,
-        context,
-        withHeaderOffset,
-    } = props;
+    const { space, customization, pages, ancestors, header, context, withHeaderOffset } = props;
 
     return (
         <aside