refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-01-13 21:13:16 -08:00
parent ac5bdac161
commit c4486b4a77
6 changed files with 22 additions and 6 deletions

View File

@ -77,6 +77,10 @@ math {
-webkit-app-region: no-drag;
}
.no-drag-region {
-webkit-app-region: no-drag;
}
iframe {
@apply rounded-lg;
}

View File

@ -266,7 +266,7 @@
threadId = null;
}}
>
<div class=" {threadId !== null ? ' h-screen w-screen' : 'px-6 py-4'} h-full">
<div class=" {threadId !== null ? ' h-screen w-full' : 'px-6 py-4'} h-full">
<Thread
{threadId}
{channel}

View File

@ -146,7 +146,7 @@
>
<div
class=" {$showCallOverlay || $showOverview || $showArtifacts
? ' h-screen w-screen'
? ' h-screen w-full'
: 'px-6 py-4'} h-full"
>
{#if $showCallOverlay}

View File

@ -2,6 +2,7 @@
import { onDestroy, onMount, createEventDispatcher } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions';
import { fade, fly, slide } from 'svelte/transition';
import { isApp } from '$lib/stores';
const dispatch = createEventDispatcher();
@ -57,14 +58,16 @@
<div
bind:this={modalElement}
class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[999] overflow-hidden overscroll-contain"
class="modal fixed right-0 {$isApp
? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]'
: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[999] overflow-hidden overscroll-contain"
in:fly={{ y: 100, duration: 100 }}
on:mousedown={() => {
show = false;
}}
>
<div
class=" mt-auto max-w-full w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
class=" mt-auto w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
on:mousedown={(e) => {
e.stopPropagation();
}}

View File

@ -358,6 +358,15 @@
showSidebar.set(!$mobile ? localStorage.sidebar === 'true' : false);
showSidebar.subscribe((value) => {
localStorage.sidebar = value;
// nav element is not available on the first render
const navElement = document.getElementsByTagName('nav')[0];
if (!value) {
navElement.style['-webkit-app-region'] = 'drag';
} else {
navElement.style['-webkit-app-region'] = 'no-drag';
}
});
await initChannels();
@ -479,7 +488,7 @@
<a
id="sidebar-new-chat-button"
class="flex justify-between items-center flex-1 rounded-lg px-2 py-1 h-full text-right hover:bg-gray-100 dark:hover:bg-gray-900 transition"
class="flex justify-between items-center flex-1 rounded-lg px-2 py-1 h-full text-right hover:bg-gray-100 dark:hover:bg-gray-900 transition no-drag-region"
href="/"
draggable="false"
on:click={async () => {

View File

@ -57,7 +57,7 @@
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} self-end flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"