Fix: responsiveness of options page

amasin76 · Oct 1, 2023 · 50f23f3 · 50f23f3
1 parent 781deab
commit 50f23f3
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 11 deletions.
diff --git a/src/pages/options/Options.css b/src/pages/options/Options.css
@@ -1,8 +0,0 @@
-.container {
-  width: 100%;
-  height: 50vh;
-  font-size: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

diff --git a/src/pages/options/Options.tsx b/src/pages/options/Options.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import themeStorage from "@src/shared/storages/themeStorage";
 import UserStyle from "./components/userStyle/";
 import "@assets/style/theme.scss";
+import "./Options.css";
 
 const Options: React.FC = () => {
 	const [theme, setTheme] = useState<"light" | "dark">("dark");
@@ -14,7 +15,7 @@ const Options: React.FC = () => {
 	}, []);
 
 	return (
-		<div className="container h-screen mx-auto px-4 sm:px-6 lg:px-60 py-5 bg-gray-900 text-white">
+		<div className="min-h-screen lg:px-60 md:px-10 sm:px-2 py-5 bg-gray-900 text-white">
 			<UserStyle />
 		</div>
 	);

diff --git a/src/pages/options/components/userStyle/Background.tsx b/src/pages/options/components/userStyle/Background.tsx
@@ -57,7 +57,7 @@ const Background: React.FC = () => {
 				<Switch checked={bgEnabled} onChange={handleBackground()} />
 			</div>
 			{bgEnabled && (
-				<div className="grid grid-cols-3 justify-between gap-y-4 ml-4">
+				<div className="flex flex-wrap gap-2 ml-4">
 					{images.map((src, index) => (
 						<ImagePreview
 							key={index}

diff --git a/src/pages/options/components/userStyle/Custom.tsx b/src/pages/options/components/userStyle/Custom.tsx
@@ -48,7 +48,7 @@ const Custom: React.FC = () => {
 				<Switch checked={customEnabled} onChange={handleCustom()} />
 			</div>
 			{customEnabled && (
-				<div className="inline-flex mx-4 gap-8 text-gray-300">
+				<div className="inline-flex flex-wrap mx-4 gap-8 text-gray-300">
 					<div className="flex flex-1 items-center gap-4">
 						<h4 className="text-xl">CSS</h4>
 						<input

diff --git a/src/pages/options/index.html b/src/pages/options/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
 		<title>Options</title>
 	</head>