style: make opening page more responsive

CSSLab · Dec 6, 2024 · 8a8f6df · 8a8f6df
1 parent 38ec884
commit 8a8f6df
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/components/Openings/OpeningBook.tsx b/src/components/Openings/OpeningBook.tsx
@@ -19,7 +19,7 @@ export const OpeningBook: React.FC<Props> = ({
   setSelectedVariation,
 }: Props) => {
   return (
-    <div className="flex max-h-[40vh] flex-1 flex-col gap-2 border border-white border-opacity-5 bg-background-1 py-2 md:h-[75vh] md:max-h-max md:min-w-[35vh] md:max-w-[45vh] md:rounded md:py-3">
+    <div className="flex max-h-[40vh] flex-1 flex-col gap-2 border border-white border-opacity-5 bg-background-1 py-2 md:h-[75vh] md:max-h-max md:min-w-[40vh] md:max-w-[30%] md:rounded md:py-3">
       <div className="flex items-center gap-2 px-4 2xl:px-6">
         <i className="material-symbols-outlined text-xl md:text-3xl">
           menu_book

diff --git a/src/components/Openings/PlayOpening.tsx b/src/components/Openings/PlayOpening.tsx
@@ -217,7 +217,7 @@ function Switcher({
             role="button"
             tabIndex={0}
             onClick={() => setSelected(option)}
-            className={`flex flex-1 cursor-pointer items-center justify-center px-3 py-1.5 ${selected.id === option.id ? 'bg-human-4/60' : 'hover:bg-human-4/10'}`}
+            className={`flex flex-1 cursor-pointer items-center justify-center px-2 py-1.5 ${selected.id === option.id ? 'bg-human-4/60' : 'hover:bg-human-4/10'}`}
           >
             <p className="select-none text-sm">{option.name}</p>
           </div>

diff --git a/src/pages/openings/index.tsx b/src/pages/openings/index.tsx
@@ -51,7 +51,7 @@ const Openings: React.FC = () => {
           }}
         />
       </div>
-      <div className="flex h-[75vh] flex-1 flex-col justify-between gap-4 md:min-w-[35vh] md:max-w-[45vh]">
+      <div className="flex min-h-[75vh] flex-1 flex-col justify-between gap-4 md:min-w-[40vh] md:max-w-[30%]">
         <OpeningDetails
           selectedOpening={selectedOpening}
           selectedVariation={selectedVariation}