From ac2aac2bcbf6fcb0b9c074895674a299f28306e1 Mon Sep 17 00:00:00 2001
From: Benjamin Shafii <ben@prologe.io>
Date: Tue, 31 Dec 2024 15:43:16 +0100
Subject: [PATCH] fix: tailwind styling issues

---
 packages/plugin/tailwind.config.js                         | 1 +
 packages/plugin/views/assistant/ai-chat/audio-recorder.tsx | 7 ++++---
 packages/plugin/views/assistant/view.tsx                   | 2 ++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/plugin/tailwind.config.js b/packages/plugin/tailwind.config.js
index a2e4feac..d8536ce9 100644
--- a/packages/plugin/tailwind.config.js
+++ b/packages/plugin/tailwind.config.js
@@ -24,4 +24,5 @@ module.exports = {
   corePlugins: {
       preflight: false, // Keeps Obsidian's base styles
   },
+  important: '#app',
 }
diff --git a/packages/plugin/views/assistant/ai-chat/audio-recorder.tsx b/packages/plugin/views/assistant/ai-chat/audio-recorder.tsx
index c74ab2de..f4d3aef6 100644
--- a/packages/plugin/views/assistant/ai-chat/audio-recorder.tsx
+++ b/packages/plugin/views/assistant/ai-chat/audio-recorder.tsx
@@ -139,10 +139,11 @@ export const AudioRecorder: React.FC<AudioRecorderProps> = ({
 
   return (
     <div className="flex flex-col gap-4">
-      <button
+      <Button
         onClick={isRecording ? stopRecording : startRecording}
         className={cn(
-          "bg-transparent opacity-50 cursor-pointer",
+          // box shadow none
+          "bg-transparent opacity-50 cursor-pointer shadow-lg ",
           "hover:opacity-100 hover:shadow-none",
           "shadow-none disabled:shadow-none disabled:cursor-not-allowed",
           {
@@ -165,7 +166,7 @@ export const AudioRecorder: React.FC<AudioRecorderProps> = ({
         ) : (
           <MicIcon className="w-4 h-4" />
         )}
-      </button>
+      </Button>
 
       {debug && recordings.length > 0 && (
         <div className="flex flex-col gap-2 p-2 rounded bg-[--background-secondary]">
diff --git a/packages/plugin/views/assistant/view.tsx b/packages/plugin/views/assistant/view.tsx
index c1274cf9..9d2d17cb 100644
--- a/packages/plugin/views/assistant/view.tsx
+++ b/packages/plugin/views/assistant/view.tsx
@@ -186,6 +186,7 @@ export class AssistantViewWrapper extends ItemView {
     this.root?.render(
       <AppContext.Provider value={{ plugin: this.plugin, root: this.root }}>
         <React.StrictMode>
+          <div id="app">
             <AssistantContent
               plugin={this.plugin}
               leaf={this.leaf}
@@ -194,6 +195,7 @@ export class AssistantViewWrapper extends ItemView {
                 this.setActiveTab = setTab;
               }}
             />
+          </div>
         </React.StrictMode>
       </AppContext.Provider>
     );