diff --git a/.changeset/metal-zebras-switch.md b/.changeset/metal-zebras-switch.md
new file mode 100644
index 0000000..e68115e
--- /dev/null
+++ b/.changeset/metal-zebras-switch.md
@@ -0,0 +1,5 @@
+---
+"ember-showdown-shikiji": patch
+---
+
+fix: wrap filename on overflow
diff --git a/ember-showdown-shikiji/src/styles/shikiji.css b/ember-showdown-shikiji/src/styles/shikiji.css
index 0876faf..6ee14e8 100644
--- a/ember-showdown-shikiji/src/styles/shikiji.css
+++ b/ember-showdown-shikiji/src/styles/shikiji.css
@@ -34,6 +34,9 @@ pre.shiki {
     Menlo,
     monospace;
   border-bottom: 1px solid var(--code-line-numbers-color);
+  word-break: break-all;
+  display: flex;
+  justify-content: space-between;
 }
 
 .filename + pre {
@@ -58,23 +61,15 @@ code.line-numbers .line::before {
 }
 
 /* Ribbons */
-.filename.javascript::after,
-.filename.js::after,
-.filename.glimmer-js::after,
-.filename.gjs::after,
-.filename.typescript::after,
-.filename.ts::after,
-.filename.glimmer-ts::after,
-.filename.gts::after,
-.filename.handlebars::after,
-.filename.hbs::after {
-  position: absolute;
+.filename::after {
+  position: relative;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  top: 0.625rem;
-  bottom: 0.625rem;
-  right: 0;
+  margin-top: -0.125rem;
+  margin-bottom: -0.125rem;
+  right: -1rem;
   padding-left: 1.5rem;
   padding-right: 1rem;
   color: var(--code-background-color);
diff --git a/test-app/public/example.md b/test-app/public/example.md
index 0320795..16ef410 100644
--- a/test-app/public/example.md
+++ b/test-app/public/example.md
@@ -27,6 +27,13 @@ function greet() {
 </template>
 ```
 
+Adding a `javascript` as a language to get syntax highlighting
+```gts {data-filename=app/components/deeply/nested/so/it/overflows/example.gts}
+<template>
+  <p>Hello world!</p>
+</template>
+```
+
 Now let's do something a bit more complex
 
 ```handlebars {data-filename=app/templates/blog-post.hbs}