use bootstrap after review on claude

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/LayoutTab.tsx

@@ -141,10 +141,9 @@ export const LayoutTab: React.FC = () => {
       code: `\`\`\`\n${t(`${i18nKey}.code_block_text`)}\n\`\`\``,
       preview: (
         <div
-          className="rounded p-3 w-100 font-monospace"
+          className="rounded p-3 w-100 font-monospace bg-dark"
           style={{
             minWidth: '200px',
-            backgroundColor: 'var(--bs-dark)',
           }}
         >
           <div className="small text-white-50 lh-base">

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.module.scss

@@ -11,7 +11,6 @@
 
 .codeContent {
   font-size: bs.$font-size-sm;
-  color: rgba(var(--bs-white-rgb), 0.5);
 }
 
 .copyBadge {
@@ -25,10 +24,5 @@
 }
 
 .inlineCodeLabel {
-  color: var(--bs-pink);
-  border: 1px solid var(--bs-pink);
-}
-
-.externalLink {
-  color: var(--bs-secondary-color);
+  border: 1px solid currentColor;
 }

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.tsx

@@ -38,7 +38,7 @@ const GuideRow = ({
             className={`p-2 ps-2 pe-5 rounded position-relative bg-dark ${styles.codeBlockWrapper}`}
           >
             <pre
-              className={`m-0 small font-monospace fw-normal ${styles.codeContent}`}
+              className={`m-0 small font-monospace fw-normal text-white-50 ${styles.codeContent}`}
             >
               {code}
             </pre>
@@ -107,7 +107,7 @@ export const TextStyleTab: React.FC = () => {
       title: t(`${i18nKey}.inline_code`),
       code: `\`${t(`${i18nKey}.inline_code`)}\` \n~~~${t(`${i18nKey}.inline_code`)}~~~`,
       preview: (
-        <div className="d-flex flex-column gap-2">
+        <div className="d-flex flex-column gap-2 align-items-start">
           <code
             className={`rounded px-1 d-inline-block bg-transparent ${styles.inlineCodeLabel}`}
           >