feat: make code viewer line number column sticky

vighnesh153 · Sep 15, 2024 · 08ebeea · 08ebeea
1 parent 1867e63
commit 08ebeea
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/GUIDE_AND_TRACKER.md b/GUIDE_AND_TRACKER.md
@@ -26,7 +26,6 @@ Visit
 
 #### Tasks
 
-- Code viewer line numbers sticky
 - Create Kotlin AST
 - Kotlin Syntax highlighting
 - Differ between 2 string content

diff --git a/nodejs-tools/nodejs-apps/vighnesh153-astro/src/components/solid/code_viewer/CodeViewer.tsx b/nodejs-tools/nodejs-apps/vighnesh153-astro/src/components/solid/code_viewer/CodeViewer.tsx
@@ -34,10 +34,9 @@ export function CodeViewer({
 
   const toggleShowFullCode = () => setShowFullCode((old) => not(old));
 
-  // TODO: convert code to html with syntax highlighting
   return (
     <div
-      class="rounded-xl overflow-clip bg-secondary border border-text4"
+      class="rounded-xl bg-secondary border border-text4"
       style={{
         'font-family': 'Courier, Menlo, Consolas',
       }}
@@ -52,19 +51,20 @@ export function CodeViewer({
 
       {/* Code body */}
       <div
-        class="p-4 w-full whitespace-pre flex bg-[#16181d] overflow-auto"
+        class="relative py-4 w-full whitespace-pre flex items-stretch bg-[#16181d] overflow-auto"
         style={{
           'max-height': not(viewEntireCode) && not(showFullCode()) ? `${maxCodeBodyHeight}px` : 'unset',
         }}
       >
-        <div>
+        <div class="sticky h-full ps-4 pe-2 left-0 bg-[inherit]">
           {Array.from({ length: lineCount })
             .map((_, index) => `${index + 1}`.padStart(3, ' '))
             .join('\n')}
         </div>
         <div
           class={classes(`
             ps-6
+            pe-4
             
             flex-grow
             items-stretch