From 0d43eb562e1b997c78747f5ed66386c6ef4f34af Mon Sep 17 00:00:00 2001
From: Utkarsh Singh <utkarsh.singh@liu.se>
Date: Fri, 17 Jan 2025 23:26:29 +0100
Subject: [PATCH] anew

---
 _posts/2024-12-12-wannier_elf.md |  3 +++
 _sass/_base.scss                 | 34 +++++++++++++++++++++++---------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/_posts/2024-12-12-wannier_elf.md b/_posts/2024-12-12-wannier_elf.md
index f4869355..2d0bc226 100644
--- a/_posts/2024-12-12-wannier_elf.md
+++ b/_posts/2024-12-12-wannier_elf.md
@@ -666,6 +666,9 @@ A good example is $$\mathrm{CeO_2}$$ where Cerium is supposed to have +4 and not
 <iframe src="/assets/plotly/elf_plot.html" frameborder='0' scrolling='no' height="750px" width="100%" style="border: 1px dashed grey;"></iframe>
 </div>
 
+{: .block-info }
+> If the image is empty, move the sliders at the bottom of the frame.
+
 ---
 
 ### **Conclusion**
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 2cc5f1cc..4c8047eb 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1009,22 +1009,27 @@ figure.highlight {
   max-width: 100%;
   border-radius: 6px;
   overflow: hidden;
+  background: var(--global-code-bg-color);
 
   table {
     margin: 0;
+    padding: 0;
     border: none;
     width: 100%;
     border-spacing: 0;
+    border-collapse: collapse;
     
     td {
       padding: 0;
       border: none;
+      vertical-align: top;
 
       &.gutter {
         width: 50px;
         min-width: 50px;
-        background: rgb(36, 27, 63);
-        border-right: 0.5px solid rgb(0, 0, 0);
+        max-width: 50px;
+        background: rgba(0,0,0,0.04);
+        border-right: 1px solid rgba(0,0,0,0.1);
         
         pre {
           margin: 0;
@@ -1032,24 +1037,33 @@ figure.highlight {
           text-align: right;
           color: rgba(0,0,0,0.4);
           user-select: none;
-          white-space: nowrap;
+          white-space: pre;
+          overflow: hidden;
         }
       }
       
       &.code {
-        width: 100%;
+        width: auto;
         
         pre {
           margin: 0;
           padding: 1rem;
-          overflow-x: auto;
-          white-space: pre-wrap;       /* Allow wrapping */
-          word-wrap: break-word;       /* Break long words if needed */
-          word-break: break-all;       /* Break words at any character */
+          white-space: pre-wrap;
+          word-wrap: break-word;
+          overflow-wrap: break-word;
+          overflow: visible;
         }
       }
     }
   }
+
+  // Ensure code lines align with line numbers
+  .gl {
+    white-space: pre;
+    width: 50px;
+    min-width: 50px;
+    padding-right: 10px;
+  }
 }
 
 pre {
@@ -1057,7 +1071,6 @@ pre {
   background-color: var(--global-code-bg-color);
   border-radius: 6px;
   padding: 6px 12px;
-  overflow-x: auto;
 
   pre,
   code {
@@ -1080,6 +1093,9 @@ code {
   pre {
     margin: 0;
     padding: 10px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 }