addresses issue in #353 label obsuring inner div

- in a code box, the 'language' label was obscuring the contents of the code box it labelled
- code box contents were overflowing to right
- this patch does not change problem in #396

Website/plugins/hiliter/_highlighting.scss

@@ -22,6 +22,8 @@
     float: right;
     font-size: xx-small;
     font-style: italic;
+    height: auto;
+    margin: 0 5px 0 0;
   }
 
 // required to match highlights-js css with raku highlighter css
@@ -36,6 +38,9 @@
    pre {
     background-color: $code-background;
     color: $code-foreground;
+    display: inline-block;
+    overflow: scroll;
+    width: 96%;
   }
   .rakudoc-in-code {
     padding: 1.25rem 1.5rem;

Website/plugins/hiliter/config.raku

@@ -8,7 +8,7 @@
 	:name<hiliter>,
 	:render,
 	:template-raku<template.raku>,
-	:version<0.1.4>,
+	:version<0.1.5>,
 	:css-link(
 		'href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-light.min.css" title="light"',
 		'href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css" title="dark"',

Website/plugins/hiliter/hiliter-dark.css

@@ -85,6 +85,8 @@ textarea::selection {
   float: right;
   font-size: xx-small;
   font-style: italic;
+  height: auto;
+  margin: 0 5px 0 0;
 }
 .raku-code pre.browser-hl {
   padding: 7px;
@@ -98,6 +100,9 @@ textarea::selection {
 .raku-code pre {
   background-color: #212426;
   color: #f2f2f2;
+  display: inline-block;
+  overflow: scroll;
+  width: 96%;
 }
 .raku-code .rakudoc-in-code {
   padding: 1.25rem 1.5rem;

Website/plugins/hiliter/hiliter-light.css

@@ -62,6 +62,8 @@
   float: right;
   font-size: xx-small;
   font-style: italic;
+  height: auto;
+  margin: 0 5px 0 0;
 }
 .raku-code pre.browser-hl {
   padding: 7px;
@@ -75,6 +77,9 @@
 .raku-code pre {
   background-color: #fafafa;
   color: #030303;
+  display: inline-block;
+  overflow: scroll;
+  width: 96%;
 }
 .raku-code .rakudoc-in-code {
   padding: 1.25rem 1.5rem;