fix: multiple small documentation issues across tutorials and reference

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -207,7 +207,7 @@ export const ReferenceDirectoryWithFilter = ({
   return (
     <div>
       <div class="h-0 overflow-visible">
-        <div class="content-grid-simple absolute -left-0 -right-0 -top-[60px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
+        <div class="content-grid-simple absolute -left-0 -right-0 -top-[30px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
           <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
             <input
               type="text"

src/content/tutorials/en/conditionals-and-interactivity.mdx

@@ -524,7 +524,7 @@ function draw() {
 
   fill("green");
 
-  rect(0, horizon, 400, 400);
+  rect(0, horizon, 400, 200);
 
 }
 ```

src/content/tutorials/en/repeating-with-loops.mdx

@@ -199,7 +199,7 @@ Above `setup()`:
 In `draw()`:
 
 - After the code that draws the finish line, declare a new local variable `x` to position all the body segments: `let x = circX;`
-- Add a *for loop* using: `for (let i = 0; i < length; i += 1) { }`
+- Add a *for loop* using: `for (let i = 0; i < segments; i += 1) { }`
   - A *for loop* will repeat the code we write inside the curly brackets multiple times. 
   - Move the lines of code that draw the `circle()` into the curly brackets of the *for loop*.
 - After the for loop, add: `circX += spacing` 
@@ -936,7 +936,7 @@ function moveCaterpillars() {
   for (let i = 0; i < numCaterpillars; i += 1) {
     //Give each caterpillar a
     //random speed.
-    move = random(5, 30);
+    let move = random(5, 30);
     caterpillarEnds[i] += move;
   }
 }
@@ -1001,7 +1001,7 @@ function moveCaterpillars() {
   for (let i = 0; i < numCaterpillars; i += 1) {
     //Give each caterpillar a
     //random speed.
-    move = random(5, 30);
+    let move = random(5, 30);
 
     // Update caterpillars' x-coordinates
     caterpillarEnds[i] += move;

src/layouts/BaseLayout.astro

@@ -121,7 +121,7 @@ const headerTopic = topic
         </div>
         {
           HeaderContent && (
-            <div class="px-5 md:px-lg pt-sm pb-lg">
+            <div class="px-5 md:px-lg pt-xl pb-lg">
               <div class="rendered-markdown">
                 <HeaderContent />
               </div>