fix(styles): use correct dark-mode selector in css

The dark-mode selector changed from the class "dark" attached to the
body element to a data-attribute with some react-bootstrap upgrade.
This commit reflects this change in our custom css.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/global-styles/github-markdown.scss

@@ -654,7 +654,7 @@
   h4,
   h5,
   h6 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       margin-top: 24px;
       margin-bottom: 16px;
       font-weight: 600;
@@ -663,7 +663,7 @@
   }
 
   h1 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 2em;
     }
   }
@@ -675,35 +675,35 @@
   }
 
   h2 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 1.5em;
     }
   }
 
   h3 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 1.25em;
     }
   }
 
   h4 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: 1em;
     }
   }
 
   h5 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: .875em;
     }
   }
 
   h6 {
-    body.dark &, & {
+    body[data-bs-theme=dark] &, & {
       font-size: .85em;
     }
 
-    body.dark & {
+    body[data-bs-theme=dark] & {
       color: #b4c7d5;
     }
   }
@@ -722,7 +722,7 @@
   }
 
   li {
-    word-wrap: break-all;
+    word-wrap: break-word;
   }
 
   li > p {
@@ -826,7 +826,6 @@
 
   pre code {
     display: inline;
-    max-width: auto;
     padding: 0;
     margin: 0;
     overflow: visible;

frontend/global-styles/index.scss

@@ -18,7 +18,7 @@
 @import "./markdown-tweaks";
 @import "./reveal";
 
-.text-black, body.dark .text-black {
+.text-black, body[data-bs-theme=dark] .text-black {
   color: $black;
 }
 

frontend/src/components/common/highlighted-code/highlighted-code.module.scss

@@ -14,7 +14,7 @@
     display: grid !important;
     grid-template-columns: auto minmax(0, 1fr);
 
-    :global(body.dark) & {
+    :global(body[data-bs-theme=dark]) & {
       background-color: rgb(27, 31, 35);
     }
 

frontend/src/components/editor-page/sidebar/style/sidebar.module.scss

@@ -9,7 +9,7 @@
   --sidebar-menu-width: 280px;
   --sidebar-separator-color: var(--bs-secondary);
 
-  :global(body.dark) & {
+  :global(body[data-bs-theme=dark]) & {
     --sidebar-separator-color: rgba(255, 255, 255, 0.2);
   }