add open props

GoogleChromeLabs · Mar 31, 2024 · 6838069 · 6838069
1 parent 3bc134d
commit 6838069
Show file tree

Hide file tree

Showing 5 changed files with 3,166 additions and 5,172 deletions.
diff --git a/app/components/metatip/ally.element.js b/app/components/metatip/ally.element.js
@@ -66,7 +66,7 @@ export class Ally extends Metatip {
       : background
 
     return `
-      <figure>
+      <figure visbug-ally>
         <header>
           <h5>&#60;${el.nodeName.toLowerCase()}&#62;${el.id && '#' + el.id}</h5>
         </header>

diff --git a/app/components/metatip/metatip.element.css b/app/components/metatip/metatip.element.css
@@ -1,3 +1,4 @@
+@import "open-props/borders.shadow.min.css";
 @import "../_variables.css";
 
 :host {
@@ -127,7 +128,8 @@
   border-radius: var(--border-radius);
   border: 1px solid var(--theme-bg);
   margin-bottom: 2px;
-  max-inline-size: max-content;
+  inline-size: max-content;
+  max-inline-size: max(35ch, 45vw);
 
   background: var(--theme-bd);
   backdrop-filter: blur(5px);
@@ -136,6 +138,11 @@
   place-self: var(--is-flipped);
 }
 
+:host [visbug-ally] > header {
+  padding: .1ex 10px .25ex;
+  border-radius: var(--radius-round);
+}
+
 :host code {
   display: grid;
   grid-template-columns: max-content auto;

diff --git a/app/components/selection/label.element.js b/app/components/selection/label.element.js
@@ -68,7 +68,7 @@ export class Label extends HTMLElement {
     const position = isFixed ? 'fixed' : 'absolute'
     this.style.setProperty('--top', `${top}px`)
     this.style.setProperty('--left', `${left}px`)
-    this.style.setProperty('--max-width', `${boundingRect.width + (window.innerWidth - boundingRect.x - boundingRect.width - 20)}px`)
+    this.style.setProperty('--max-width', `${boundingRect.width + (window.innerWidth - boundingRect.x - boundingRect.width - 40)}px`)
     this.style.setProperty('--position', position)
     this.setAttribute('data-original-top', top)
     this.setAttribute('data-original-left', left)