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.
This commit is contained in:
Trung Nguyen committed 2026-07-01 15:45:36 +02:00
1 parent f02e2a5633
commit 824235ad10
1 file changed
+9 -21
+9 -21
View File
@@ -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 @@
<!-- 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;