🐛(site) Fix step reinforcements and content overflow (#776)

* Fix step reinforcements and content overflow * Swap to clip --------- Co-authored-by: Sam Richard <[email protected]>
chromeos · Sep 3, 2024 · 7ced109 · 7ced109
1 parent 71b9a47
commit 7ced109
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/site/src/layouts/views/Tutorial.astro b/site/src/layouts/views/Tutorial.astro
@@ -203,16 +203,28 @@ if (intro) {
               client:only="svelte"
             />
             <ul class="reinforcements">
-              {tutorial.outro.next.steps.map((g, i) => (
-                <Reinforcement
-                  tutorial={slugify(tutorial.title)}
-                  task={slugify(tutorial.tasks[task].title)}
-                  step={i}
-                  client:load
-                >
-                  <Text body={g} inline={true} wrapped={false} />
-                </Reinforcement>
-              ))}
+              {tutorial?.tasks[task]?.reinforcement &&
+                tutorial?.tasks[task]?.reinforcement.map((g, i) => (
+                  <Reinforcement
+                    tutorial={slugify(tutorial.title)}
+                    task={slugify(tutorial.tasks[task].title)}
+                    step={i}
+                    client:load
+                  >
+                    <Text body={g} inline={true} wrapped={false} />
+                  </Reinforcement>
+                ))}
+              {outro &&
+                tutorial.outro.next.steps.map((g, i) => (
+                  <Reinforcement
+                    tutorial={slugify(tutorial.title)}
+                    task={slugify(tutorial.tasks[task].title)}
+                    step={i}
+                    client:load
+                  >
+                    <Text body={g} inline={true} wrapped={false} />
+                  </Reinforcement>
+                ))}
             </ul>
           </section>
         </>
@@ -397,6 +409,7 @@ if (intro) {
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    overflow-x: clip;
   }
 
   .pagination {