refactor: Message Height CSS Variable

This commit is contained in:
Aleksander Grygier 2026-01-24 19:15:38 +01:00
parent 13f756421c
commit 801ef93522
5 changed files with 6 additions and 4 deletions

View File

@ -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 {

View File

@ -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

View File

@ -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">

View File

@ -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>

View File

@ -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) {