feat: add supporting styles for fullview component

Author: huijing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {

src/components/MermaidWrapper.astro

@@ -61,7 +61,9 @@ span::after {
     const blob = new Blob([as_text], { type: 'image/svg+xml' })
     const url = URL.createObjectURL(blob)
     const win = open(url)
-    win.onload = (evt) => URL.revokeObjectURL(url)
+    if (win) {
+      win.onload = (evt) => URL.revokeObjectURL(url);
+    }
   }
 
   const buttons = document.querySelectorAll('[data-mermaid-button]');

src/components/Tooltip.astro

@@ -94,7 +94,7 @@ tooltips.forEach((tooltip) => {
   });
 });
 
-const buttons = document.querySelectorAll('[data-tooltip-button]');
+const buttons = document.querySelectorAll<HTMLInputElement>('[data-tooltip-button]');
 buttons.forEach((button) => {
   button.addEventListener('click', function() {
     if (this.getAttribute('aria-expanded') === 'true') {
@@ -118,7 +118,7 @@ buttons.forEach((button) => {
   });
 
   button.addEventListener('keydown', function(e) {
-    if ((e.keyCode || e.which) === 27) {
+    if (e.key === "Escape") {
       this.setAttribute('aria-expanded', 'false');
     }
   });

src/styles/ilf-docs.css

@@ -510,7 +510,7 @@ input:not([type="submit"]):not([type="file"]):focus {
 }
 
 @media screen and (min-width: 80rem) {
-  .expressive-code {
+  .main-pane:not(.full-view) .expressive-code {
     max-width: 48rem;
   }
 }