From 9756b1a2be48be313ce791506dd85bc4ba53670e Mon Sep 17 00:00:00 2001
From: Francesca Giannino <francesca.giannino86@gmail.com>
Date: Tue, 23 Jul 2024 10:56:39 +0200
Subject: [PATCH] style: fix id selector

---
 .../src/components/orama-chat-box/orama-chat-box.tsx           | 2 +-
 packages/ui-stencil/src/styles/globals.scss                    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
index de17d545..dd7fbf25 100644
--- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
+++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
@@ -33,7 +33,7 @@ export class ChatBox {
 
     return (
       // TODO: only dark theme supported to start
-      <Host id="orama-ui" class="theme-dark">
+      <Host id="orama-ui-chatbox" class="theme-dark">
         <orama-chat style={{ display: 'flex' }} />
       </Host>
     )
diff --git a/packages/ui-stencil/src/styles/globals.scss b/packages/ui-stencil/src/styles/globals.scss
index 5a0fb55f..a48f93a1 100644
--- a/packages/ui-stencil/src/styles/globals.scss
+++ b/packages/ui-stencil/src/styles/globals.scss
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
 
-#orama-ui {
+// selector id starts with orama-ui
+[id^='orama-ui'] {
   @include font-smoothing();
   font-weight: normal;
   text-rendering: optimizeLegibility;