style: make opening page more responsive

Author: kevinjosethomas

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

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>

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}