Ensure that onboarding buttons are visible, even on short viewports (#2324)

* Ensure onboarding buttons are visible on shorter screens

* Fix dismiss button hover styling

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/routes/Onboarding/CodeEditor.tsx

@@ -13,11 +13,11 @@ export default function CodeEditor() {
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
       <div
         className={
-          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
-        <section className="flex-1">
+        <section className="flex-1 overflow-y-auto">
           <h2 className="text-3xl font-bold">
             Editing code with <span className="text-primary">kcl</span>
           </h2>

src/routes/Onboarding/InteractiveNumbers.tsx

@@ -14,7 +14,7 @@ export default function InteractiveNumbers() {
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
       <div
         className={
-          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/ParametricModeling.tsx

@@ -30,7 +30,7 @@ export default function ParametricModeling() {
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
       <div
         className={
-          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/Streaming.tsx

@@ -13,11 +13,11 @@ export default function Streaming() {
     <div className="fixed grid justify-start items-center inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
-        <section className="flex-1">
+        <section className="flex-1 overflow-y-auto">
           <h2 className="text-3xl font-bold">Streaming Video</h2>
           <p className="my-4">
             Historically, CAD programs run on your computer, so to run

src/routes/Onboarding/index.tsx

@@ -146,7 +146,7 @@ export function OnboardingButtons({
         onClick={dismiss}
         iconStart={{
           icon: 'close',
-          bgClassName: 'bg-destroy-80',
+          bgClassName: 'bg-destroy-80 group-hover:bg-destroy-80',
           iconClassName: 'text-destroy-20 group-hover:text-destroy-10',
         }}
         className="hover:border-destroy-40 hover:bg-destroy-10/50 dark:hover:bg-destroy-80/50"