🐛 Adjust code highlight when overflowing x-axis

Fixes: #374

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- Code highlight background cut off when overflowing content area ([#374](https://github.com/jpanther/congo/issues/374))
 - 'Description' HTML meta tag not set from article description ([#378](https://github.com/jpanther/congo/issues/378))
 
 ## [2.4.1] - 2022-11-14

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;
+  overflow-x: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
   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 */

assets/css/main.css

@@ -34,11 +34,11 @@ body:has(#menu-controller:checked) {
 
 /* RTL support */
 .prose blockquote {
-  @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
+  @apply rtl:border-l-0 rtl:border-r-4 rtl:pr-4;
 }
 .prose ul > li,
 .prose ol > li {
-  @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
+  @apply rtl:mr-7 rtl:pl-0 rtl:pr-2;
 }
 .prose ol > li:before,
 .prose ul > li:before {
@@ -84,7 +84,7 @@ body:has(#menu-controller:checked) {
   @apply visible;
 }
 .copy-button {
-  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer opacity-90 bg-neutral-200 whitespace-nowrap rounded-bl-md rounded-tr-md text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200;
+  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
 }
 .copy-button:hover,
 .copy-button:focus,
@@ -93,36 +93,37 @@ body:has(#menu-controller:checked) {
   @apply bg-primary-100 dark:bg-primary-600;
 }
 .copy-textarea {
-  @apply absolute opacity-5 -z-10;
+  @apply absolute -z-10 opacity-5;
 }
 
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply static rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
 /* LineTableTD */
 .chroma .lntd,
 .chroma .lntd pre {
-  @apply p-0 m-0 align-top border-none;
+  @apply p-0 m-0 overflow-hidden align-top border-none;
 }
 /* LineTable */
 .chroma .lntable {
-  @apply block w-auto px-4 py-3 overflow-hidden text-base;
+  @apply block w-auto py-3 overflow-x-auto text-base;
   border-spacing: 0;
 }
+/* LineTable Line */
+.chroma .lntable .line {
+  @apply pr-4;
+}
 /* LineHighlight */
 .chroma .hl {
-  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
+  @apply block w-auto bg-primary-100 dark:bg-primary-900;
-}
-.chroma .lntd .hl {
-  @apply p-0 m-0;
 }
 /* LineNumbersTable */
 /* LineNumbers */
 .chroma .lnt,
 .chroma .ln {
-  @apply text-neutral-600 dark:text-neutral-300  mr-[0.4em] px-[0.4em] py-0;
+  @apply mr-[0.4em] px-[0.4em] py-0 text-neutral-600 dark:text-neutral-300;
 }
 /* Keyword */
 /* KeywordDeclaration */