fix: modify styles to follow new anchor api

pragmasoft-ua · Aug 8, 2024 · d277f66 · d277f66
1 parent 36b54e6
commit d277f66
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 29 deletions.
diff --git a/packages/kite-chat-component/src/kite-chat.css b/packages/kite-chat-component/src/kite-chat.css
@@ -200,9 +200,13 @@ kite-context-menu {
     anchor-name: --toggle;
   }
 
-  .kite-dialog[popover] {
-    anchor-default: --toggle;
-    position-fallback: --flip;
+  [popover] {
+    position-anchor: --toggle;
+    bottom: calc(anchor(top) + var(--kite-gap));
+    top: auto;
+    left: auto;
+    right: anchor(right);
+    position-try: flip-block, flip-inline, flip-block flip-inline;
   }
 
   @media (max-width: 22rem) {

diff --git a/packages/kite-chat-component/src/kite-chat.ts b/packages/kite-chat-component/src/kite-chat.ts
@@ -57,32 +57,6 @@ console.debug('kite-chat loaded');
 
 const componentStyles = css`
   ${unsafeCSS(kiteChatStyles)}
-  @position-fallback --flip {
-      @try {
-        bottom: calc(anchor(top) + var(--gap));
-        top: auto;
-        left: auto;
-        right: anchor(right);
-      }
-      @try {
-        bottom: auto;
-        top: calc(anchor(bottom) + var(--gap));
-        left: auto;
-        right: anchor(right);
-      }
-      @try {
-        bottom: calc(anchor(top) + var(--gap));
-        top: auto;
-        left: anchor(left);
-        right: auto;
-      }
-      @try {
-        bottom: auto;
-        top: calc(anchor(bottom) + var(--gap));
-        left: anchor(left);
-        right: auto;
-      }
-  }
 `;
 
 const CUSTOM_EVENT_INIT = {