🐛 Adjust code highlight when overflowing x-axis

Fixes: #374

assets/css/compiled/main.css

@@ -1194,6 +1194,7 @@ body:has(#menu-controller:checked) {
 .chroma .lntd,
 .chroma .lntd pre {
   margin: 0px;
+  overflow: hidden;
   border-style: none;
   padding: 0px;
   vertical-align: top;
@@ -1204,9 +1205,7 @@ body:has(#menu-controller:checked) {
 .chroma .lntable {
   display: block;
   width: auto;
-  overflow: hidden;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  overflow-x: auto;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   font-size: 1rem;
@@ -1214,17 +1213,19 @@ body:has(#menu-controller:checked) {
   border-spacing: 0;
 }
 
+/* LineTable Line */
+
+.chroma .lntable .line {
+  padding-right: 1rem;
+}
+
 /* LineHighlight */
 
 .chroma .hl {
-  margin-left: -1rem;
-  margin-right: -1rem;
   display: block;
   width: auto;
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 
 .dark .chroma .hl {
@@ -1232,11 +1233,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
 }
 
-.chroma .lntd .hl {
-  margin: 0px;
-  padding: 0px;
-}
-
 /* LineNumbersTable */
 
 /* LineNumbers */