Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

make some overall QoL improvements
CI / check (22) (push) Failing after 16m26s
Details
CI / check (24) (push) Failing after 15m50s
Details

Browse Source
This commit is contained in:
Frederik Spirgi
2026-10-08 11:02:32 +02:00
parent 0f58a996ec
commit 8666e09049
7 changed files with 271 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+21 -7
View File
@@ -424,7 +424,14 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.chat-header-actions { display: flex; align-items: center; }
.overflow-trigger { min-height: 38px; padding: 8px 12px; border-radius: 999px; font-size: .8rem; }
.messages-wrap { min-height: 0; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.messages-wrap { min-height: 0; position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.conversation-search { padding: 8px max(16px, calc((100% - 940px) / 2)); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.conversation-search label { flex: 0 0 auto; color: var(--text-soft); font-size: .76rem; font-weight: 700; }
.conversation-search input { min-width: 0; width: min(280px, 100%); min-height: 34px; }
.conversation-search span { min-width: 64px; color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
.conversation-search button { min-height: 34px; padding: 5px 9px; font-size: .72rem; }
.conversation-search-match { background: #facc15; color: #1f2937; border-radius: 2px; }
.conversation-search-match.current { outline: 2px solid var(--brand); outline-offset: 1px; }
.messages-panel {
height: 100%;
min-height: 0;
@@ -497,7 +504,10 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.input-meta, .input-container { width: min(940px, 100%); margin-inline: auto; }
.input-meta { margin-bottom: 5px; padding-left: 10px; }
.composer-hint { margin: 0; color: var(--text-muted); font-size: .72rem; }
.input-container { padding: 7px; display: grid; grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px; grid-template-areas: "attach search reasoning message send"; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
.input-container { padding: 7px; display: grid; grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px 58px; grid-template-areas: "attach search reasoning message send stop"; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
.input-container:not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px; grid-template-areas: "attach search reasoning message send"; }
.input-container [hidden] { display: none !important; }
.composer-tool-label { display: none; }
#attachImage { grid-area: attach; }
.upload-previews { width: min(940px, 100%); margin: 0 auto 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.upload-previews[hidden] { display: none; }
@@ -508,10 +518,6 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.message-images img { max-width: min(360px, 100%); max-height: 300px; object-fit: contain; border-radius: 12px; }
.message-images a { max-width: 100%; }
.image-drag-target { outline: 2px solid currentColor; }
@media (max-width: 480px) {
.input-container { grid-template-columns: repeat(3, 36px) minmax(0, 1fr) 44px; grid-template-areas: "message message message message send" "attach search reasoning . ."; gap: 4px; }
#attachImage, #webSearch, #reasoning { width: 36px; height: 36px; min-height: 36px; border-radius: 12px; }
}
#webSearch, #reasoning { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; }
#webSearch { grid-area: search; }
#reasoning { grid-area: reasoning; }
@@ -524,7 +530,7 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
#msgInput { grid-area: message; min-height: 44px; max-height: 160px; padding: 11px 13px; resize: none; background: transparent; border: 0; box-shadow: none; }
#send { grid-area: send; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 17px; }
#send::after { content: "\2191"; font-size: 1.1rem; font-weight: 800; }
#send.loading::after { content: "■"; font-size: .85rem; }
#stopGeneration { grid-area: stop; width: 58px; height: 44px; min-height: 44px; padding: 0 7px; font-size: .76rem; font-weight: 800; border-radius: 15px; }
.generation-settings-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.generation-settings-grid .field-wide, .generation-settings-grid button { grid-column: 1 / -1; }
.generation-advanced { margin-top: 6px; border-top: 1px solid var(--border); }
@@ -689,6 +695,14 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.messages-empty-actions { display: grid; }
.chat-drawer-action-list { grid-template-columns: 1fr; }
.chat-drawer-action-list > * { grid-column: auto; }
.conversation-search { padding: 6px 10px; flex-wrap: wrap; gap: 5px; }
.conversation-search label { width: 100%; }
.conversation-search input { flex: 1 1 110px; }
.conversation-search span { min-width: 55px; }
.input-container { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px 58px; grid-template-areas: "message message message send stop" "attach search reasoning . ."; gap: 4px; }
.input-container:not(:has(#stopGeneration:not([hidden]))) { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; grid-template-areas: "message message message send" "attach search reasoning ."; }
#attachImage, #webSearch, #reasoning { width: 100%; height: 49px; min-height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; }
.composer-tool-label { display: inline; font-size: .63rem; line-height: 1; }
}
@media (hover: none) { .msg-actions { opacity: 1; } }