Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: panel below input bar when open, panel width matches widget

Browse Source
This commit is contained in:
Oliver
2026-06-06 16:59:48 -03:00
parent 919e81a7c4
commit 86c94817e1
1 changed files with 30 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+30 -33
View File
@@ -975,12 +975,37 @@
.nav-chat { .nav-chat {
position: relative; position: relative;
display: flex; display: flex;
align-items: flex-end; flex-direction: column;
width: 340px; width: 340px;
height: 36px; height: 36px;
min-height: 36px; min-height: 36px;
--chat-panel-height: 300px; --chat-panel-height: 300px;
overflow: visible; transition: height 0.25s ease;
}
.nav-chat.open {
height: calc(var(--chat-panel-height) + 8px + 36px);
}
.nav-chat-panel {
width: 100%;
height: var(--chat-panel-height);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px 18px 0 0;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden;
visibility: hidden;
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
transition: opacity 0.22s ease, visibility 0.22s ease;
margin-bottom: 8px;
flex-shrink: 0;
}
.nav-chat.open .nav-chat-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
} }
.nav-chat-main { .nav-chat-main {
position: relative; position: relative;
@@ -989,46 +1014,18 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 36px; height: 36px;
min-height: 36px;
background: var(--bg-inner); background: var(--bg-inner);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 999px; border-radius: 999px;
overflow: hidden; overflow: hidden;
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; flex-shrink: 0;
transition: border-color 0.25s, box-shadow 0.25s;
} }
.nav-chat:focus-within .nav-chat-main { .nav-chat:focus-within .nav-chat-main {
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15); box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
} }
.nav-chat.open .nav-chat-main {
border-color: var(--accent);
transform: translateY(var(--chat-panel-height));
}
.nav-chat-panel {
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 100%;
height: var(--chat-panel-height);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
display: flex;
flex-direction: column;
transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
.nav-chat.open .nav-chat-panel {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.chat-panel-header { .chat-panel-header {
display: flex; display: flex;
align-items: center; align-items: center;