Merge pull request #30 from taga3s/fix/filename-ui

fix: filename ui styling
taga3s · Sep 16, 2024 · b99b6c4 · b99b6c4
2 parents 525f49f + 1beb840
commit b99b6c4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/app/modules/rehype-momiji/buildCodeBlockHTML.ts b/app/modules/rehype-momiji/buildCodeBlockHTML.ts
@@ -35,15 +35,15 @@ const buildCodeBlockHTML = (
     ) {
       node.properties = {
         class: node.properties.class,
-        style: `${node.properties.style}; padding-top: 0px;`,
+        style: `${node.properties.style}; padding-top: 48px;`,
         tabindex: node.properties.tabindex,
       };
 
       node.children.unshift({
         type: "element",
         tagName: "div",
         properties: {
-          style: `width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${filenameColorStyle}`,
+          style: `position: absolute; top: 0; left: 16px; width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${filenameColorStyle}`,
         },
         children: [
           {

diff --git a/app/modules/rehype-momiji/rehypeMomiji.ts b/app/modules/rehype-momiji/rehypeMomiji.ts
@@ -80,7 +80,7 @@ const rehypeMomiji: Plugin = (options: Options = {}) => {
       );
 
       const container = `
-        <div style="display: flex; flex-direction: column; gap: 2px;">
+        <div style="position: relative; display: flex; flex-direction: column; gap: 2px;">
           ${highlightCode}
         </div>
       `;