From 4fed4e6ef8ca38bd786d76ed3fc35c011a1662c6 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Tue, 22 Nov 2022 10:32:13 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Adjust=20code=20highlight=20when?=
 =?UTF-8?q?=20overflowing=20x-axis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes: #374
---
 CHANGELOG.md                 |  1 +
 assets/css/compiled/main.css | 20 ++++++++------------
 assets/css/main.css          | 25 +++++++++++++------------
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23bcaec5..012471f0 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index d9b31e8c..268275f2 100644
--- a/assets/css/compiled/main.css
+++ b/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 */
diff --git a/assets/css/main.css b/assets/css/main.css
index ffb5a8da..fd1959d0 100644
--- a/assets/css/main.css
+++ b/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;
-}
-.chroma .lntd .hl {
-  @apply p-0 m-0;
+  @apply block w-auto bg-primary-100 dark:bg-primary-900;
 }
 /* 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 */