Fixes for layout and pre styles (#45)

* Prevent global `pre` styles on ReactcodeBlock

* Fix layout overflow

* Update pre fix

* Update packages/theme/components/layout/article/Article.module.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/theme/components/layout/article/Article.module.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix layout of articles without ToC

* Make IndexCards full width

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: danielguillan

packages/theme/components/layout/article/Article.module.css

@@ -1,42 +1,38 @@
 .Article {
   display: grid;
+  grid-template-areas: 'main';
+  grid-template-columns: 1fr;
 }
 
 .Article--withToc {
   gap: var(--base-size-48);
+  grid-template-areas: 'main aside';
+  grid-template-columns: 1fr 200px;
 }
 
 .main {
-  order: 1;
+  grid-area: main;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .aside {
-  order: 0;
+  grid-area: aside;
+  position: relative;
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: 1023px) {
   .Article--withToc {
-    display: flex; /* Prevents column overflow */
-    flex-direction: column;
-  }
-}
-
-@media screen and (min-width: 1023px) {
-  .main {
-    order: 0;
-  }
-
-  .aside {
-    order: 1;
-  }
-
-  .Article--withToc {
-    grid-template-columns: 1fr 200px;
+    grid-template-areas:
+      'aside'
+      'main';
+    grid-template-columns: 1fr;
   }
 }
 
 @media screen and (min-width: 2048px) {
   .Article--withToc {
+    grid-template-areas: 'main';
     grid-template-columns: 1fr;
   }
 }

packages/theme/components/layout/index-cards/IndexCards.tsx

@@ -96,7 +96,7 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
         return (
           <Grid.Column span={{xsmall: 12, small: 12, medium: 12, large: 6, xlarge: 4}} key={item.frontMatter.title}>
             <Link legacyBehavior passHref href={item.route}>
-              <Card href="#" hasBorder>
+              <Card href="#" hasBorder fullWidth>
                 <Card.Image src={thumbnailUrl} alt="" aspectRatio="4:3" />
                 <Card.Heading>{item.frontMatter.title}</Card.Heading>
                 {item.frontMatter.description && <Card.Description>{item.frontMatter.description}</Card.Description>}

packages/theme/components/layout/table-of-contents/TableOfContents.module.css

@@ -26,7 +26,6 @@
     display: flex;
     flex-direction: column;
     min-width: 280px;
-    right: 0;
     overflow: auto;
     padding: var(--base-size-40) var(--base-size-40) var(--base-size-40) 0;
     top: 65px;

packages/theme/css/global.css

@@ -18,7 +18,8 @@ body {
   margin-block-start: 0 !important;
 }
 
-pre {
+/* Pre styles are scoped to Nextra code blocks to prevent unintended styling of other code blocks (e.g., ReactCodeBlock previews). */
+.nextra-code pre {
   background-color: var(--brand-color-canvas-subtle);
   border-radius: var(--brand-borderRadius-large);
   padding-top: 1rem;