Merge pull request #8 from movie-web/firefox-android-styling

Make frame compatible with firefox android

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movie-web/extension",
   "displayName": "movie-web extension",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Enhance your movie-web experience with just one click",
   "author": "movie-web",
   "scripts": {

src/Popup.css

@@ -1,6 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');
 
+html {
+  min-height: 300px;
+  min-width: 300px;
+}
+
 body {
+  min-height: 300px;
+  min-width: 300px;
   margin: 0;
   font-family: 'Inter', sans-serif;
 }
@@ -11,4 +18,4 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

src/components/Frame.css

@@ -1,4 +1,6 @@
 .frame {
+  height: 100%;
+  width: 100%;
   background-color: #0a080e;
   background-image: radial-gradient(271.48% 132.05% at 136.13% 65.62%, #271945b3 0%, #1c1c2c00 100%), radial-gradient(671.15% 123.02% at 76.68% -34.38%, #272753 0%, #17172000 100%);
-}
+}

src/components/Frame.tsx

@@ -7,9 +7,5 @@ export interface FrameProps {
 }
 
 export function Frame(props: FrameProps) {
-  return (
-    <div className="frame" style={{ width: 300, height: 300 }}>
-      {props.children}
-    </div>
-  );
+  return <div className="frame">{props.children}</div>;
 }