From 6a02cbc876352807e8a8a79f7df3595b9a94d910 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Mon, 27 Mar 2023 22:59:07 +0800
Subject: [PATCH] style: improve popup page adaptation in complex situations

---
 src/manifest.json     |  4 ++++
 src/manifest.v2.json  |  4 ++++
 src/popup/Popup.jsx   |  6 +++---
 src/popup/styles.scss | 12 +++++++++---
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/manifest.json b/src/manifest.json
index 052c40f..24a26e0 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -25,6 +25,10 @@
   "action": {
     "default_popup": "popup.html"
   },
+  "options_ui": {
+    "page": "popup.html",
+    "open_in_tab": true
+  },
   "content_scripts": [
     {
       "matches": [
diff --git a/src/manifest.v2.json b/src/manifest.v2.json
index 8e63223..2a89073 100644
--- a/src/manifest.v2.json
+++ b/src/manifest.v2.json
@@ -25,6 +25,10 @@
   "browser_action": {
     "default_popup": "popup.html"
   },
+  "options_ui": {
+    "page": "popup.html",
+    "open_in_tab": true
+  },
   "content_scripts": [
     {
       "matches": [
diff --git a/src/popup/Popup.jsx b/src/popup/Popup.jsx
index 706e8cb..cb7b2d4 100644
--- a/src/popup/Popup.jsx
+++ b/src/popup/Popup.jsx
@@ -391,7 +391,7 @@ function Donation() {
       >
         <img alt="buymeacoffee" src={bugmeacoffee} />
       </a>
-      <hr />
+      <br />
       <>
         Wechat Pay
         <img alt="wechatpay" src={wechatpay} />
@@ -465,7 +465,7 @@ function Popup() {
 
   return (
     <div className="container">
-      <form>
+      <form style="width:100%;">
         <Tabs selectedTabClassName="popup-tab--selected">
           <TabList>
             <Tab className="popup-tab">General</Tab>
@@ -494,7 +494,7 @@ function Popup() {
           )}
         </Tabs>
       </form>
-      <hr />
+      <br />
       <Footer currentVersion={currentVersion} latestVersion={latestVersion} />
     </div>
   )
diff --git a/src/popup/styles.scss b/src/popup/styles.scss
index 0f90992..64a33e3 100644
--- a/src/popup/styles.scss
+++ b/src/popup/styles.scss
@@ -24,8 +24,13 @@
 }
 
 .container {
-  width: 440px;
-  height: 560px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 440px;
+  min-height: 560px;
+  width: 100%;
+  height: 100%;
   padding: 20px;
   overflow-y: auto;
 }
@@ -44,7 +49,7 @@
 
 .footer {
   width: 90%;
-  position: absolute;
+  position: fixed;
   bottom: 10px;
   display: flex;
   flex-direction: row;
@@ -54,6 +59,7 @@
   border-radius: 5px;
   padding: 6px;
   z-index: 2147483647;
+  font-size: 12px;
 }
 
 .popup-tab {