🐛 Fix HTML table not full width on desktop

Fixes: #826

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `x-twitter` option missing when using sharing links ([#809](https://github.com/jpanther/congo/issues/809))
 - Chinese default config contains incorrect `author` block name ([#807](https://github.com/jpanther/congo/pull/807))
 - Links in articles are prefixed with a blank space ([#813](https://github.com/jpanther/congo/pull/813))
+- HTML tables would not fill the container width on desktop ([#826](https://github.com/jpanther/congo/issues/826))
 
 ## [2.8.0] - 2024-01-22
 

assets/css/compiled/main.css

@@ -1254,13 +1254,18 @@ table {
   overflow: auto;
 }
 
+@media (min-width: 768px) {
+  table {
+    display: table;
+  }
+}
+
 /* Fix long inline code sections breaking out of article on mobile */
 
 code {
   word-wrap: break-word;
   /* All browsers since IE 5.5+ */
   overflow-wrap: break-word;
-  /* Renamed property in CSS3 draft spec */
 }
 
 /* -- Chroma Highlight -- */
@@ -2216,10 +2221,6 @@ code {
   border-width: 1px;
 }
 
-.border-s {
-  border-inline-start-width: 1px;
-}
-
 .border-t {
   border-top-width: 1px;
 }
@@ -3092,6 +3093,10 @@ code {
   right: 0px;
 }
 
+.ltr\:-ml-5:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: -1.25rem;
+}
+
 .ltr\:block:where([dir="ltr"], [dir="ltr"] *) {
   display: block;
 }
@@ -3104,10 +3109,22 @@ code {
   display: none;
 }
 
+.ltr\:border-l:where([dir="ltr"], [dir="ltr"] *) {
+  border-left-width: 1px;
+}
+
+.ltr\:pl-5:where([dir="ltr"], [dir="ltr"] *) {
+  padding-left: 1.25rem;
+}
+
 .rtl\:left-0:where([dir="rtl"], [dir="rtl"] *) {
   left: 0px;
 }
 
+.rtl\:-mr-5:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: -1.25rem;
+}
+
 .rtl\:block:where([dir="rtl"], [dir="rtl"] *) {
   display: block;
 }
@@ -3120,6 +3137,14 @@ code {
   display: none;
 }
 
+.rtl\:border-r:where([dir="rtl"], [dir="rtl"] *) {
+  border-right-width: 1px;
+}
+
+.rtl\:pr-5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 1.25rem;
+}
+
 @media print {
   .print\:hidden {
     display: none;

assets/css/main.css

@@ -109,14 +109,13 @@ body:has(#menu-controller:checked) {
 
 /* Fix long tables breaking out of article on mobile */
 table {
-  display: block;
+  @apply block overflow-auto md:table;
-  overflow: auto;
 }
 
 /* Fix long inline code sections breaking out of article on mobile */
 code {
   word-wrap: break-word; /* All browsers since IE 5.5+ */
-  overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
+  @apply break-words;
 }
 
 /* -- Chroma Highlight -- */