style: improve popup page adaptation in complex situations

src/manifest.json

@@ -25,6 +25,10 @@
   "action": {
     "default_popup": "popup.html"
   },
+  "options_ui": {
+    "page": "popup.html",
+    "open_in_tab": true
+  },
   "content_scripts": [
     {
       "matches": [

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": [

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>
   )

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 {