Make code header a solid bar instead

This is much easier to layout, and has the benefit of being able to fit
more in.

The transform was still leaving space allocated, which looked odd

static/src/scss/_blocks.scss

@@ -58,21 +58,20 @@ div.block-code {
   .filename {
     font-family: $family-code;
     background-color: $grey-lighter;
-    font-size: 1rem;
+    font-size: 80%;
-    position: relative;
-    text-align: right;
-    transform: translateY(100%) translateX(-100%);
-    display: inline-block;
-    left: 100%;
     padding: 0.25rem 1rem;
-    border-radius: 0 0 0 $radius-large;
+    display: flex;
-    box-shadow: $shadow;
+    justify-content: space-between;
 
     @include dark-mode {
       background-color: $grey-darker;
     }
   }
 
+  &:not(:hover) .filename {
+    visibility: hidden;
+  }
+
   .highlight {
     pre,
     span,

static/src/scss/_bulma_overrides.scss

@@ -20,4 +20,3 @@ $code-background: none;
 $pre-background: none;
 $code-padding: 0;
 $code: inherit;
-$content-pre-padding: 2.75rem 1.25rem 1.25rem 1.25rem;

website/contrib/code_block/templates/contrib/blocks/code.html

@@ -1,5 +1,9 @@
-<span class="filename">
+<div class="filename">
-  {{ value.language }}
+  <span>
-  <i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
+    {{ value.language }}
-</span>
+  </span>
+  <span>
+    <i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
+  </span>
+</div>
 {{ value.code }}