fix: themecreator relocating UI

src/SEQTA.ts

@@ -837,7 +837,7 @@ export function AppendElementsToDisabledPage() {
   AddBetterSEQTAElements(false)
 
   let settingsStyle = document.createElement('style')
-  settingsStyle.innerHTML = `
+  settingsStyle.innerHTML = /* css */`
   .addedButton {
     position: absolute !important;
     right: 50px;
@@ -903,18 +903,12 @@ export function closeSettings() {
 }
 
 function addExtensionSettings() {
-  /* const link = GetCSSElement('src/interface/popup.css')
-  document.querySelector('html')!.appendChild(link) */
-
   const extensionPopup = document.createElement('div')
   extensionPopup.classList.add('outside-container', 'hide')
   extensionPopup.id = 'ExtensionPopup'
-  document.body.appendChild(extensionPopup)
   
-  const extensionpopup2div = document.createElement('div')
+  const extensionContainer = document.querySelector('#container') as HTMLDivElement
-  extensionpopup2div.classList.add('ExtensionPopup2')
+  if (extensionContainer) extensionContainer.appendChild(extensionPopup)
-  extensionpopup2div.id = 'ExtensionPopup2'
-  extensionPopup.appendChild(extensionpopup2div)
 
   const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
   extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded`

src/css/injected.scss

@@ -33,7 +33,7 @@ html {
   position: fixed;
   right: 0;
   height: 100%;
-  width: 200px;
+  z-index: 100;
 }
 .connectedNotificationsWrapper > div > button > svg > g {
   fill: var(--theme-primary) !important;

src/seqta/ui/ThemeCreator.ts

@@ -3,14 +3,21 @@ import popup from '../../interface/index.html?url'
 
 /**
  * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
+ * @returns void
  */
 export function OpenThemeCreator() {
-    const container = document.querySelector('#container')
+    const width = '300px'
+
     const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe')
     themeCreatorIframe.src = `${browser.runtime.getURL(popup)}#themeCreator`
     themeCreatorIframe.id = 'themeCreatorIframe'
     themeCreatorIframe.setAttribute('allowTransparency', 'true')
     themeCreatorIframe.setAttribute('excludeDarkCheck', 'true')
+    themeCreatorIframe.style.width = width
     themeCreatorIframe.style.border = 'none'
-    container!.appendChild(themeCreatorIframe)
+    
+    const mainContent = document.querySelector('#container') as HTMLDivElement
+    if (mainContent) mainContent.style.width = `calc(100% - ${width})`
+
+    document.body.appendChild(themeCreatorIframe)
 }

src/seqta/utils/listeners/MessageListener.ts

@@ -13,6 +13,7 @@ export class MessageHandler {
 
     case 'EditSidebar':
       this.editSidebar();
+      closeSettings();
       sendResponse({ status: 'success' });
       break;
 
@@ -45,9 +46,13 @@ export class MessageHandler {
       return true;
     case 'OpenChangelog':
       OpenWhatsNewPopup();
+      closeSettings();
+      sendResponse({ status: 'success' });
       break;
     case 'OpenThemeCreator':
       OpenThemeCreator();
+      closeSettings();
+      sendResponse({ status: 'success' });
       break;
     
     default: