Skip to content

Commit

Permalink
feat(canvas/chats-@container): implement more compact chat styles for…
Browse files Browse the repository at this point in the history 
… Canvas view using `@container` queries (#92, #86)

- Applied mobile-like chat styles when the canvas is opened and the parent element of chats and the prompt field is less than `md` or `sm` breakpoint using the new `@container` CSS property
- Made chats and the prompt textarea full width for a more compact and readable layout
- Removed unnecessary elements like the GPT logo, big paddings,big paddings and spacing around, and border radius for a cleaner look

Changes summary:
    - Enhanced chat styles to be more compact and readable when the canvas is opened
    - Made the chats and prompt textarea full width for better visual appeal in the canvas layout.
    - Removed unnecessary elements like the GPT logo, big paddings and spacing around, and border radius to create a cleaner and more readable design
  • Loading branch information
@itsmartashub
itsmartashub committed Dec 14, 2024
1 parent bbcaf87 commit 54b2b89
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 12 deletions.
47 changes: 46 additions & 1 deletion src/sass/abstract/_bp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,49 @@ $xxl: 96em; // 1536px
@include dev('xxl') {
// Your styles for 2x extra-large screens (min-width: 1536px)
} */
} */


@mixin container($bp) {
@if $bp =='xxs' {
@container (max-width: #{$xxs}) {
@content;
}
}

@if $bp =='xs' {
@container (max-width: #{$xs}) {
@content;
}
}

@if $bp =='sm' {
@container (max-width: #{$sm}) {
@content;
}
}

@if $bp =='md' {
@container (max-width: #{$md}) {
@content;
}
}

@if $bp =='lg' {
@container (max-width: #{$lg}) {
@content;
}
}

@if $bp =='xl' {
@container (max-width: #{$xl}) {
@content;
}
}

@if $bp =='xxl' {
@container (min-width: #{$xxl}) {
@content;
}
}
}
18 changes: 14 additions & 4 deletions src/sass/abstract/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@

/* ? --- Paddings --- */
--p-chat-bubble: 1.2rem;
--px-chat-bubble-edge-gap: 4vw;
// --px-chat-bubble-edge-gap: 4vw;
--p-contextmenu: 0.8rem;
--p-contextmenu-item: 0.9rem 1rem;
--p-prompt-textarea: 0.7rem;
Expand Down Expand Up @@ -133,6 +133,16 @@

--link: var(--c-accent) !important;

@include container('md') {
// --px-chat-bubble-edge-gap: 1vw;
--p-chat-bubble: .8rem;
--br-chat-bubble: calc(var(--br) * 1.1);
}

@include container('sm') {
--br-chat-bubble: var(--br) !important;
}

@include dev('md') {
--p-chat-bubble: .8rem;
--br-chat-bubble: calc(var(--br) * 1.55);
Expand All @@ -143,9 +153,9 @@
--p-sidebar-nav: 0.3rem;
}

@include dev('sm') {
--px-chat-bubble-edge-gap: 0.45rem;
}
// @include dev('sm') {
// --px-chat-bubble-edge-gap: 0.45rem;
// }


// --box-shadow-sticky: 0 10px 40px 5px hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0.85);
Expand Down
9 changes: 7 additions & 2 deletions src/sass/elements/_chats-textarea-max-width.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@
// main:has(#prompt-textarea) [class*="xl:max-w-[48rem]"] {
main:has(#composer-background) {
.px-3.text-base.m-auto {
padding-left: var(--px-chat-bubble-edge-gap) !important;
padding-right: var(--px-chat-bubble-edge-gap) !important;
// padding-left: var(--px-chat-bubble-edge-gap) !important;
// padding-right: var(--px-chat-bubble-edge-gap) !important;

/* Only textarea wrapper */
.mx-auto.flex.flex-1.text-base:has(>form) {
max-width: var(--w_prompt_textarea) !important;

// @include container('md') {
// border: 1px solid green !important;
// --w_prompt_textarea: 100%;
// }

/* TODO This element causes weird empty space before prompt field which makes prompt fields visually unshifted or misaligned. The best would be to display:none, but idk if that would be filled with some important content in the future. So I use :empty to remove it only when this element is without any content. */
& > div.flex.justify-center:has(~form):empty {
// border: 4px solid orange !important;
Expand Down
89 changes: 84 additions & 5 deletions src/sass/elements/_right--main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/* .grow.overflow-auto.bg-token-main-surface-primary:has(article) - is for the targeting "Share Link" page */
.grow.overflow-auto.bg-token-main-surface-primary:has([data-testid^='conversation-turn-']),
main [role='presentation'] {
container: inline-size;

/* Main Page chat-container Bg*/
&,
Expand Down Expand Up @@ -34,22 +35,43 @@ main [role='presentation'] {

/* @ === RIGHT - CHATS BUBBLES ===*/
[data-testid^='conversation-turn-'] {
// container: inline-size / article;
// container: inline-size;
// container: article / inline-size;
/* Edit icon in user chat for example. Edit state user chat bg */
--main-surface-tertiary: var(--c-surface-3) !important;
// margin-bottom: var(--mb-chat-bubble) !important;

@include container('sm') {
// --px-chat-bubble-edge-gap: 0.45rem;
--p-chat-bubble: 1rem;
--br-chat-bubble: calc(var(--br) * 1.2);

.m-auto.text-base:has(>.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"]) {
// border: 2px solid red !important;
padding-left: 0.8rem !important;
padding-right: 0.8rem !important;
}
}

div[data-message-author-role],
.prose {
line-height: calc(var(--lineHeight) / 16) !important;
font-size: calc((var(--fontSize) / 16) * 1rem) !important;
}

/* TODO: check if this [class*='xl:max-w-[48rem]'] can be removed
/* Right chat content parent
.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] is GPT chat bubble */
// [class*='xl:max-w-[48rem]'],
/* Necu da stavim direkt na chat bubble jer nece biti dobro kad imamo double response prikazan */
// .mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] {
.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] {
max-width: var(--w_chat_gpt) !important;

@include container('md') {
--w_chat_gpt: 100%;
width: var(--w_chat_gpt);
}
}

/* Chat bubble footer SVG icons - edit, read aloud, copy, regenerate, bad response */
Expand Down Expand Up @@ -229,11 +251,14 @@ main [role='presentation'] {
padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble) var(--p-chat-bubble) !important;
border-radius: var(--br-chat-bubble) !important;

@include container('sm') {
--pt-multiplier: 1;
}

@include dev('sm') {
--pt-multiplier: 1.4;
}


/* Left chat content parent
! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
/*
Expand All @@ -254,9 +279,16 @@ main [role='presentation'] {

width: calc(100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble) - var(--p-chat-bubble)) !important; // more consistent width (right chat bubble spacing = left spacing)

@include container('md') {
--svg-gap: 1.25rem;
}

@include container('sm') {
width: 100% !important;
}

@include dev('md') {
--svg-gap: 1.25rem !important; // md-gap-5 (1.25rem)
--svg-gap: 1.25rem; // md-gap-5 (1.25rem)
}

@include dev('sm') {
Expand Down Expand Up @@ -290,9 +322,14 @@ main [role='presentation'] {
}

/* GPT avatar in its chat bubbles: with img is the GPTs Store item avatar (.gizmo-shadow-stroke), and with svg is gpt logo (.gizmo-bot-avatar ) */
@include container('sm') {
.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
display: none !important;
}
}

@include dev('sm') {
.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
// background-color: red !important;
display: none !important;
}
}
Expand Down Expand Up @@ -474,4 +511,46 @@ body > .fixed.top-8.right-4 {
--text-primary: var(--c-on-accent) !important;
border-color: var(--c-accent) !important;
}
}
}


// @container article (max-width: $sm) {

// [data-testid^='conversation-turn-'] {

// & > div {
// --px-chat-bubble-edge-gap: 0.4rem !important;
// }

// .mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] {
// --p-chat-bubble: 0.5rem !important;
// --br-chat-bubble: var(--br) !important;
// // background-color: red !important;
// // border: 4px solid orange !important;
// width: 100% !important;

// .flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
// // background-color: red !important;
// display: none !important;
// }

// }

// &:has([data-message-author-role='user']) [class*='bg-token-message-surface'] {
// width: 100% !important;
// max-width: 100% !important;
// }

// &:has([data-message-author-role='assistent']) {
// border: 2px solid red !important;
// }

// }

// [data-testid^="conversation-turn-"]:has([data-message-author-role="assistant"]) > div.text-base > div:first-child:has(.markdown) .agent-turn.relative.flex.w-full.flex-col {
// width: 100% !important;
// border: 2px solid red !important;

// }

// }

0 comments on commit 54b2b89

Please sign in to comment.