chore: add MUST command to adl page

Author: patwlan

static/adl/index.html

@@ -424,14 +424,15 @@ <h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">
                 ADL Examples
             </p>
              <p class="mt-4 max-w-2xl text-xl text-stone-600 lg:mx-auto">
-                See the difference between standard LLM behavior and ADL's controlled execution.
+                See the difference between standard LLM behavior and ADL's controlled execution and
+                 how ADL can improve dialog design.
             </p>
         </div>
 
-        <div class="flex overflow-x-auto gap-8 pb-8 snap-x relative">
+        <div class="flex flex-col gap-12 relative">
 
             <!-- Example 1: Steps -->
-            <div class="min-w-[80vw] lg:min-w-[1000px] snap-center bg-nature-page rounded-2xl border border-nature-border p-8 flex flex-col lg:flex-row gap-8">
+            <div class="bg-nature-page rounded-2xl border border-nature-border p-8 flex flex-col lg:flex-row gap-8">
                <div class="lg:w-1/3 space-y-4">
                     <div class="flex items-center gap-3">
                         <div class="p-2 bg-nature-primary/10 rounded-lg">
@@ -478,7 +479,7 @@ <h4 class="font-bold text-xs text-stone-500 uppercase tracking-wide mb-2">Scenar
             </div>
 
              <!-- Example 2: Tool Calling -->
-            <div class="min-w-[80vw] lg:min-w-[1000px] snap-center bg-nature-page rounded-2xl border border-nature-border p-8 flex flex-col lg:flex-row gap-8">
+            <div class="bg-nature-page rounded-2xl border border-nature-border p-8 flex flex-col lg:flex-row gap-8">
                <div class="lg:w-1/3 space-y-4">
                     <div class="flex items-center gap-3">
                         <div class="p-2 bg-nature-primary/10 rounded-lg">