Move many things over from Knossos (and other rearrangements) (#102)

lib/components/base/CopyCode.vue

@@ -1,13 +1,13 @@
 <template>
   <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
-    {{ text }}
+    <span>{{ text }}</span>
     <CheckIcon v-if="copied" />
     <ClipboardCopyIcon v-else />
   </button>
 </template>
 
 <script setup>
-import { CheckIcon, ClipboardCopyIcon } from '@/components'
+import { CheckIcon, ClipboardCopyIcon } from '@'
 </script>
 
 <script>
@@ -34,7 +34,7 @@ export default {
 
 <style lang="scss" scoped>
 .code {
-  display: flex;
+  display: inline-flex;
   grid-gap: 0.5rem;
   font-family: var(--mono-font);
   font-size: var(--font-size-sm);
@@ -47,6 +47,12 @@ export default {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
     outline 0.2s ease-in-out;
 
+  span {
+    max-width: 10rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   svg {
     width: 1em;
     height: 1em;