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

* Fix step reinforcements and content overflow * Swap to clip --------- Co-authored-by: Sam Richard <samrichard@google.com>
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 {