refactor: Message Height CSS Variable
This commit is contained in:
parent
13f756421c
commit
801ef93522
|
|
@ -116,6 +116,8 @@
|
|||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--chat-form-area-height: 24rem;
|
||||
|
||||
--max-message-height: min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem));
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
<Card
|
||||
class="overflow-y-auto rounded-[1.125rem] !border-2 !border-dashed !border-border/50 bg-muted px-3.75 py-1.5 data-[multiline]:py-2.5"
|
||||
data-multiline={isMultiline ? '' : undefined}
|
||||
style="border: 2px dashed hsl(var(--border)); max-height: calc(100dvh - var(--chat-form-area-height));"
|
||||
style="border: 2px dashed hsl(var(--border)); max-height: var(--max-message-height);"
|
||||
>
|
||||
<div
|
||||
class="relative transition-all duration-300 {isExpanded
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@
|
|||
<Card
|
||||
class="max-w-[80%] overflow-y-auto rounded-[1.125rem] border-none bg-primary/5 px-3.75 py-1.5 text-foreground backdrop-blur-md data-[multiline]:py-2.5 dark:bg-primary/15"
|
||||
data-multiline={isMultiline ? '' : undefined}
|
||||
style="max-height: calc(100dvh - var(--chat-form-area-height)); overflow-wrap: anywhere; word-break: break-word;"
|
||||
style="max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;"
|
||||
>
|
||||
{#if currentConfig.renderUserContentAsMarkdown}
|
||||
<div bind:this={messageElement} class="text-md">
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
bind:this={contentContainer}
|
||||
class="overflow-y-auto border-t border-muted px-3 pb-3"
|
||||
onscroll={handleScroll}
|
||||
style="max-height: calc(100dvh - var(--chat-form-area-height));"
|
||||
style="max-height: var(--max-message-height);"
|
||||
>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -670,7 +670,7 @@
|
|||
border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
|
||||
background: var(--code-background);
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
max-height: calc(100dvh - var(--chat-form-area-height));
|
||||
max-height: var(--max-message-height);
|
||||
}
|
||||
|
||||
:global(.dark) div :global(.code-block-wrapper) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue