style: make ui more consistent

Author: kevinjosethomas

src/pages/analysis/[...id].tsx

@@ -669,7 +669,7 @@ const Analysis: React.FC<Props> = ({
       <div className="flex h-full w-[90%] flex-row gap-2">
         <motion.div
           id="navigation"
-          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden 2xl:min-w-72"
+          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >

src/pages/openings/index.tsx

@@ -683,10 +683,10 @@ const OpeningsPage: NextPage = () => {
   }
 
   const desktopLayout = () => (
-    <div className="flex h-full w-full flex-col items-center py-4 md:py-10">
-      <div className="flex h-full w-[90%] flex-row gap-4">
+    <div className="flex h-full w-full flex-col items-center py-4">
+      <div className="flex h-full w-[90%] flex-row gap-2">
         {/* Left Sidebar */}
-        <div className="desktop-left-column-container flex flex-col gap-2 overflow-hidden">
+        <div className="desktop-left-column-container flex flex-col gap-2 overflow-hidden rounded">
           <div className="flex w-full flex-col">
             <OpeningDrillSidebar
               currentDrill={controller.currentDrill}

src/pages/puzzles.tsx

@@ -667,14 +667,14 @@ const Train: React.FC<Props> = ({
 
   const desktopLayout = (
     <motion.div
-      className="flex h-full w-full flex-col items-center py-4 md:py-10"
+      className="flex h-full w-full flex-col items-center py-4"
       variants={containerVariants}
       initial="hidden"
       animate="visible"
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
     >
-      <div className="flex h-full w-[90%] flex-row gap-4">
+      <div className="flex h-full w-[90%] flex-row gap-2">
         <motion.div
           className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
           variants={itemVariants}

src/styles/tailwind.css

@@ -96,7 +96,7 @@ svg {
 
 .desktop-left-column-container {
   width: 16vw;
-  min-width: 14rem;
+  min-width: max(14rem, 16vw);
   height: 85vh;
 }