Fix codeblock violating parent widht

Author: woojiahao

src/plugins/remark-steps.ts

@@ -18,7 +18,6 @@ const remarkSteps: Plugin<[], Root> = () => {
           (child: { type: string; name: string }) =>
             child.type === "containerDirective" && child.name === "step",
         );
-        console.log(steps);
         // We need to construct the necessary UI components for the tabs
         const wrapper = {
           type: "element",
@@ -92,7 +91,14 @@ const remarkSteps: Plugin<[], Root> = () => {
                                 { type: "text", value: step.attributes.title },
                               ],
                             },
-                        step,
+                        {
+                          data: {
+                            hProperties: {
+                              className: "step-data-content",
+                            },
+                          },
+                          ...step,
+                        },
                       ],
                     },
                   ],

src/styles/global.css

@@ -39,3 +39,7 @@ ul {
 a {
   @apply underline;
 }
+
+pre {
+  @apply overflow-scroll;
+}

src/styles/markdown-layout.css

@@ -69,7 +69,7 @@ div.tabs .selector div[data-tab-selector-key]:not(:first-child) {
 }
 
 div.tabs .tabs-content {
-  @apply p-4 border-1 border-neutral-300 rounded-b-md;
+  @apply w-full p-4 border-1 border-neutral-300 rounded-b-md;
 }
 
 div.tabs div.selector div[data-tab-selector-key]:not(.active-selector) {
@@ -101,9 +101,13 @@ div.steps div.steps-content div.step div.divider {
 }
 
 div.steps div.steps-content div.step div.step-data {
-  @apply w-full;
+  @apply w-full min-w-0;
 }
 
 div.steps div.steps-content div.step div.step-data p.step-title {
   @apply font-bold;
 }
+
+div.steps div.steps-content div.step div.step-data div.step-data-content {
+  @apply w-full;
+}