centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-03-27 14:28:47 +07:00
Code Issues Packages Projects Releases Wiki Activity

site(gordon): update message window styles

Browse Source 
- Increase chat panel width from 70ch to 80ch
- Update user message background colors for better contrast
- Add prose styling to messages for consistent typography
- Simplify message rendering template structure

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
2025-12-18 12:37:52 +01:00
parent a9651d19db
commit eb4bb34edf
1 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
layouts/partials/gordon-chat.html
View File

@@ -291,7 +291,7 @@
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
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-lg bg-white shadow-2xl transition-all duration-200 md:w-[min(70ch,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2 dark:bg-gray-900">
class="fixed top-0 right-0 z-50 flex h-screen w-full flex-col overflow-hidden rounded-lg bg-white shadow-2xl transition-all duration-200 md:w-[min(80ch,90vw)] md:h-[calc(100vh-1rem)] md:top-2 md:right-2 dark:bg-gray-900">
<!-- Header -->
<div
class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-3 dark:border-gray-700">
@@ -355,8 +355,8 @@
<!-- Messages -->
<template x-for="(message, index) in messages" :key="index">
<div :class="message.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
<div class="flex flex-col gap-2">
<div :class="message.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'" class="rounded-lg px-4 py-3">
<div class="flex flex-col gap-2 max-w-full">
<div :class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'" class="prose prose-sm dark:prose-invert rounded-lg px-4">
<template x-if="!message.content && message.isStreaming">
<div class="flex gap-1">
<span class="inline-block h-2 w-2 animate-bounce rounded-full bg-current"
@@ -368,10 +368,7 @@
</div>
</template>
<template x-if="message.content">
<div>
<div x-html="formatMessageContent(message.content)"
:class="message.role === 'assistant' ? 'prose prose-sm dark:prose-invert max-w-none break-words' : 'max-w-none break-words'"></div>
</div>
<div x-html="formatMessageContent(message.content)"></div>
</template>
</div>
<!-- Feedback buttons for assistant messages -->