From 824235ad104bd9d9902e1dbd7fc4878faafdf381 Mon Sep 17 00:00:00 2001
From: Trung Nguyen <trung.nguyen@docker.com>
Date: Wed, 1 Jul 2026 15:45:36 +0200
Subject: [PATCH] fix(gordon): empty-state scroll and wheel-chaining bugs

- Make outer messagesContainer the sole always-on scroller and use my-auto
  on the empty-state root so the robot's top stays at scrollTop=0 and is
  always reachable, even on short viewports.
- Add overscroll-behavior: contain to the drawer paper and messages
  scroller so the wheel doesn't chain out to the docs page behind.
- Drop the robotFloat keyframe (re-rasterises the SVG every frame while
  idle) and size the robot with clamp(80px, 35%, 160px) so it stays
  compact on short drawers.
---
 layouts/_partials/gordon-chat.html | 30 +++++++++---------------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/layouts/_partials/gordon-chat.html b/layouts/_partials/gordon-chat.html
index 6349e8c3dd5f..ad9740ef90c4 100644
--- a/layouts/_partials/gordon-chat.html
+++ b/layouts/_partials/gordon-chat.html
@@ -334,7 +334,7 @@
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="translate-x-0"
     x-transition:leave-end="translate-x-full"
-    class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-none bg-white shadow-2xl transition-all duration-200 md:w-[min(80ch,90vw)] dark:bg-gray-950"
+    class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden overscroll-contain rounded-none bg-white shadow-2xl transition-all duration-200 md:w-[min(80ch,90vw)] dark:bg-gray-950"
   >
     <!-- Header -->
     <div
@@ -385,21 +385,20 @@
     <!-- Messages container -->
     <div
       x-ref="messagesContainer"
-      class="flex-1 space-y-4 p-6"
+      class="flex min-h-0 flex-1 flex-col space-y-4 overflow-y-auto overscroll-contain p-6"
       style="scrollbar-width: none; &::-webkit-scrollbar: { display: none; }"
-      :class="{ 'overflow-y-auto': messages.length > 0 }"
     >
       <!-- Welcome message when empty -->
       <template x-if="messages.length === 0">
         <div
-          class="flex h-full flex-col items-center justify-start overflow-y-auto px-2 pt-4 pb-2 text-center"
+          class="my-auto flex flex-col items-center gap-2 px-2 pt-4 pb-2 text-center"
         >
-          <div class="mx-auto mb-2 w-4/5 max-w-xs" aria-hidden="true">
-            <div
-              class="motion-safe:animate-[robotFloat_5s_ease-in-out_infinite]"
-            >
-              {{ partialCached "icon" "images/gordon-robot.svg" "images/gordon-robot.svg" }}
-            </div>
+          <div
+            class="mx-auto mb-2"
+            style="width: clamp(80px, 35%, 160px)"
+            aria-hidden="true"
+          >
+            {{ partialCached "icon" "images/gordon-robot.svg" "images/gordon-robot.svg" }}
           </div>
           <div class="flex w-full flex-col items-center justify-start gap-3">
             <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
@@ -711,17 +710,6 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
 
 <!-- Styles for Gordon chat -->
 <style>
-  /* Robot floating animation */
-  @keyframes robotFloat {
-    0%,
-    100% {
-      transform: translateY(0px) rotate(0deg);
-    }
-    50% {
-      transform: translateY(-15px) rotate(1deg);
-    }
-  }
-
   /* Code block styles */
   #gordon-chat pre {
     background: #0d1117;