Skip to content

Commit 9adc59c

Browse files
itsmartashubitsmartashub
committed
fix: Resolve typing lag and reposition floating btn for smaller screens (#108)
- Fix laggy typing experience on smaller screens by optimizing layout calculations - Reposition floating button to prevent overlap with the "New Chat" button on the main page and the user profile image on the GPTs page Changes summary: Resolved typing lag on smaller screens and repositioned the floating button to avoid overlapping with the "New Chat" button and user profile image.
1 parent f4fdd49 commit 9adc59c

File tree

4 files changed

+85
-71
lines changed

4 files changed

+85
-71
lines changed

‎src/sass/abstract/_vars.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
/* ? --- Widths and Heights --- */
1616
--min-w-btn: 5.5rem;
17-
--h-header: calc(3.5rem + 0.5rem + 0.375rem);
17+
--h-header: 60px;
1818
--w-scrollbar: 0.365rem;
1919
// --max-w-chat-bubble: 48rem;
2020
--w_chat_user: max-content;

‎src/sass/elements/_right--main.scss

+40-45
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,26 @@
11
/* === RIGHT - CONVERSATION CONTAINER === */
2-
/* .grow.overflow-auto.bg-token-main-surface-primary:has(article) - is for the targeting "Share Link" page */
3-
.grow.overflow-auto.bg-token-main-surface-primary:has([data-testid^='conversation-turn-']),
2+
// .grow.overflow-auto.bg-token-main-surface-primary:has([data-testid^='conversation-turn-']) - outdated: "Share Link" page not exists anymore like separated page. Its now part of the chat,
43
main [role='presentation'] {
54
container: main / inline-size;
65

76
/* Main Page chat-container Bg*/
8-
&,
9-
/* Shared Link Page Bg */
10-
.bg-token-main-surface-primary.h-full.overflow-auto {
11-
background-color: var(--c-bg-chats-container) !important;
12-
}
7+
background-color: var(--c-bg-chats-container) !important;
138

149
/* GPT logo in new chat page when no-btns are shown. Its important to make this code before .gizmo-shadow-stroke (main new chat logo in old-ui) because it override its color */
15-
.flex.h-full > svg[role='img'] {
10+
.flex.h-full>svg[role='img'] {
1611
color: var(--c-accent);
1712
}
1813

19-
/* GPT logo in chat bubble */
20-
.gizmo-bot-avatar div,
21-
/* GPT logo in "New Chat" main chat-container in old-ui */
22-
.gizmo-shadow-stroke {
23-
background-color: var(--c-accent) !important;
14+
// /* GPT logo in chat bubble */
15+
// .gizmo-bot-avatar div,
16+
// /* GPT logo in "New Chat" main chat-container in old-ui */
17+
// .gizmo-shadow-stroke {
18+
// background-color: var(--c-accent) !important;
2419

25-
svg {
26-
color: var(--c-on-accent) !important;
27-
}
28-
}
20+
// svg {
21+
// color: var(--c-on-accent) !important;
22+
// }
23+
// }
2924

3025
.gizmo-bot-avatar {
3126
--main-surface-tertiary: var(--c-accent) !important;
@@ -125,7 +120,7 @@ main [role='presentation'] {
125120
border-radius: var(--br);
126121
}
127122

128-
& > .bg-token-main-surface-primary {
123+
&>.bg-token-main-surface-primary {
129124
--main-surface-primary: hsla(var(--accent-hsl) / 0.1) !important;
130125
// background-color: hsla(var(--accent-hsl) / 0.1) !important;
131126
backdrop-filter: blur(8px);
@@ -274,7 +269,7 @@ main [role='presentation'] {
274269
& > div.text-base > div[class*="xl:max-w-[48rem]"] { // ovo ne moze jer za mobile nema ove klase vec samo md:max-w-3xl
275270
& > div.text-base > div[class*="md:max-w-3xl"] {
276271
// ? Adding .markdown here fix flash background of user chat bubble on first message */
277-
& > div.text-base > div:first-child:has(.markdown, [id^="textdoc-message"]) {
272+
&>div.text-base>div:first-child:has(.markdown, [id^="textdoc-message"]) {
278273

279274
--pt-multiplier: 1.3;
280275
background-color: var(--c-bg-msg-gpt);
@@ -294,15 +289,15 @@ main [role='presentation'] {
294289
.not-prose {
295290

296291
/* DESKTOP */
297-
& > .-mt-2.bg-token-main-surface-primary:has(.mapboxgl-map) {
292+
&>.-mt-2.bg-token-main-surface-primary:has(.mapboxgl-map) {
298293
--main-surface-primary: transparent !important;
299294

300295
.bg-gradient-to-b {
301296
background: transparent !important;
302297
}
303298

304299
/* Elements present when Maps are in maps view */
305-
& > .bg-token-main-surface-primary {
300+
&>.bg-token-main-surface-primary {
306301
--main-surface-primary: var(--c-bg-msg-gpt) !important;
307302
border-radius: var(--br-btn-big) !important;
308303

@@ -346,25 +341,25 @@ main [role='presentation'] {
346341
}
347342

348343
/* Location counter bubble markers in the maps - when not selected */
349-
svg > [fill="white"] {
344+
svg>[fill="white"] {
350345
fill: var(--c-surface-2) !important;
351346
}
352347

353348
/* Kao neki svg border od neaktivnih location bubble markers */
354-
svg > [fill="black"] {
349+
svg>[fill="black"] {
355350
fill: hsla(var(--accent-hsl) / .2) !important;
356351
}
357352

358353
/* Location counter bubble markers in the maps - when selected/active */
359-
svg > [fill="#282828"] {
354+
svg>[fill="#282828"] {
360355
fill: var(--c-accent) !important;
361356
}
362357
}
363358
}
364359

365360
/* Circle location order bubbles in review cards za Maps i List views */
366361
&,
367-
& ~ div:has(a[href*="google.com/maps"]) {
362+
&~div:has(a[href*="google.com/maps"]) {
368363
.bg-black {
369364
background-color: var(--c-accent) !important;
370365
color: var(--c-on-accent) !important;
@@ -379,7 +374,7 @@ main [role='presentation'] {
379374

380375
/* Elements present when Maps are in List view or for mobile screens: wrappper of review cards.
381376
- a[href*="google.com/maps"] - Ovo je link of "Directions"*/
382-
& > div.mt-4.gap-1:has(> button.rounded-xl > div.text-left a[href*="google.com/maps"]) {
377+
&>div.mt-4.gap-1:has(> button.rounded-xl > div.text-left a[href*="google.com/maps"]) {
383378
gap: 1rem !important;
384379
}
385380

@@ -463,7 +458,7 @@ main [role='presentation'] {
463458

464459
/* Links listed from sources listed when using "/Search" */
465460
a[class*="group/nav-list"] {
466-
& > .absolute.bottom-0.left-0.top-0.bg-black\/10 {
461+
&>.absolute.bottom-0.left-0.top-0.bg-black\/10 {
467462
background-color: hsla(var(--accent-hsl) / 0.2) !important;
468463
border-radius: var(--br);
469464
}
@@ -478,18 +473,18 @@ main [role='presentation'] {
478473
}
479474
}
480475

481-
/* 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 ) */
482-
@include container('sm') {
483-
.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
484-
display: none !important;
485-
}
486-
}
476+
// /* 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 ) */
477+
// @include container('sm') {
478+
// .flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
479+
// display: none !important;
480+
// }
481+
// }
487482

488-
@include dev('sm') {
489-
.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
490-
display: none !important;
491-
}
492-
}
483+
// @include dev('sm') {
484+
// .flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
485+
// display: none !important;
486+
// }
487+
// }
493488

494489
&:has(.snap-mandatory.snap-x.overflow-x-auto) {
495490

@@ -631,10 +626,10 @@ html[data-gptheme='oled'] main [data-testid^='conversation-turn-']:has([data-mes
631626

632627

633628
/* ChatGPT's answer notification on the top right, next to the GPThemes floating button */
634-
body > .fixed.top-8.right-4 {
635-
.rounded-full:has(>svg[role='img']) {
636-
--main-surface-primary: var(--c-accent) !important;
637-
--text-primary: var(--c-on-accent) !important;
638-
border-color: var(--c-accent) !important;
639-
}
640-
}
629+
// body>.fixed.top-8.right-4 {
630+
// .rounded-full:has(>svg[role='img']) {
631+
// --main-surface-primary: var(--c-accent) !important;
632+
// --text-primary: var(--c-on-accent) !important;
633+
// border-color: var(--c-accent) !important;
634+
// }
635+
// }

‎src/sass/elements/_right--textarea.scss

+12-9
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ main form {
6060
}
6161

6262
/* Action buttons in textarea footer ("Search", "Reason", "+") */
63-
span > button.h-9.rounded-full[aria-label]:has(svg):not([data-testid]) {
63+
span>button.h-9.rounded-full[aria-label]:not([data-testid]) {
6464

6565
&,
6666
svg {
@@ -83,7 +83,7 @@ main form {
8383
}
8484
}
8585

86-
span > button[aria-label="Open in canvas"]:has(svg) {
86+
span>button[aria-label="Open in canvas"] {
8787
background-color: hsla(var(--accent-hsl) / 0.13) !important;
8888
}
8989

@@ -162,7 +162,7 @@ main form {
162162
backdrop-filter: blur(20px);
163163

164164
/* List of examples when clicked some of the cards below prompt field: "Summarize notes from a meeting", "Summarize my lease agreemen", etc */
165-
ul > li > button {
165+
ul>li>button {
166166
background: transparent !important;
167167

168168
/* "Summarize" or "Analyze" etc */
@@ -192,15 +192,18 @@ main form {
192192
}
193193

194194
/* === RIGHT - TEXTAREA part wrapper, margin-top ===*/
195-
main div[role='presentation'] div.w-full:has(form) {
196-
margin-top: 0.5rem !important;
197-
}
195+
// main div[role='presentation'] div.w-full:has(form) {
196+
// margin-top: 0.5rem !important;
197+
// }
198198

199199
// html.dark[data-gptheme='oled'] main form div[class*='bg-[#f4f4f4]']:has(#prompt-textarea) {
200-
html.dark[data-gptheme='oled'] main form #composer-background:has(#prompt-textarea) {
200+
html.dark[data-gptheme='oled'] main form #composer-background {
201201

202202
/* "Reply" in msg textarea */
203-
.bg-token-main-surface-primary {
204-
background-color: var(--c-surface-2);
203+
#reply-regions {
204+
.bg-token-main-surface-secondary {
205+
background-color: var(--c-surface-2) !important;
206+
// background-color: red !important;
207+
}
205208
}
206209
}

‎src/sass/gpthemes/_gpth-floating-btn.scss

+32-16
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,27 @@
1616
--right: 0.95rem;
1717
}
1818

19-
@include dev('sm') {
20-
--right: 5%;
21-
--floating-icon-size: 1.8rem;
19+
/* On GPTs page floating is overlaping user image in sticky header so i need to move it down */
20+
@include dev('md') {
21+
// --top: calc(var(--h-header) + 2.8rem);
22+
// --top: calc(var(--h-header) / 4);
23+
// --top: calc(var(--floating-icon-size) / 2);
24+
top: calc(var(--h-header) / 2);
25+
translate: 0 -50%;
26+
--floating-icon-size: 2.2rem;
27+
// translate: 0 calc(var(--floating-icon-size) / 5);
28+
// translate: 0 calc(var(--h-header) / 2);
29+
// transform: translateY(var(--floating-icon-size) / 2);
30+
--right: 4rem;
2231
}
2332

33+
// @include dev('sm') {
34+
// --right: 5%;
35+
// transform: translateY(-50%);
36+
// --floating-icon-size: 1.8rem;
37+
// translate: 0 calc(var(--floating-icon-size) / 2);
38+
// }
39+
2440
&-icon {
2541
position: relative;
2642
display: grid;
@@ -384,16 +400,16 @@ html.light {
384400

385401

386402
/* GPTs page */
387-
body:has(.h-full.overflow-y-auto .sticky img[alt='User']) {
388-
389-
@include dev('md') {
390-
// box-shadow: inset 0 0 0 10px red !important;
391-
392-
.gpth {
393-
&__floating {
394-
// --top: calc(var(--h-header) * 2);
395-
--top: calc(var(--h-header)/4);
396-
}
397-
}
398-
}
399-
}
403+
// body:has(.h-full.overflow-y-auto .sticky img[alt='User']) {
404+
405+
// @include dev('md') {
406+
// // box-shadow: inset 0 0 0 10px red !important;
407+
408+
// .gpth {
409+
// &__floating {
410+
// // --top: calc(var(--h-header) * 2);
411+
// --top: calc(var(--h-header)/4);
412+
// }
413+
// }
414+
// }
415+
// }

0 commit comments

Comments
 (0)