klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-06 13:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set home, chat page height so footer, header visible w/o scroll on phone

Browse Source 
Set dynamic view height of page to 100%
This commit is contained in:
Debanjum Singh Solanky
2024-08-03 13:05:29 +05:30
parent 687a881ad2
commit 5b17fa5dda
4 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/interface/web/app/chat/chat.module.css
View File

@@ -1,5 +1,5 @@
div.main { div.main {
height: 100vh; height: 100dvh;
color: hsla(var(--foreground)); color: hsla(var(--foreground));
} }
@@ -120,5 +120,4 @@ div.agentIndicator {
gap: 0; gap: 0;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }

2
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View File

@@ -359,7 +359,7 @@ export default function ChatInputArea(props: ChatInputProps) {
</Popover> </Popover>
</div> </div>
} }
<div className={`${styles.actualInputArea} flex items-center justify-between dark:bg-neutral-700`}> <div className={`${styles.actualInputArea} items-center justify-between dark:bg-neutral-700`}>
<input <input
type="file" type="file"
multiple={true} multiple={true}

7
src/interface/web/app/page.module.css
View File

@@ -1,5 +1,5 @@
div.main { div.main {
height: 100vh; height: 100dvh;
color: hsla(var(--foreground)); color: hsla(var(--foreground));
} }
@@ -15,7 +15,6 @@ div.inputBox {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 16px; border-radius: 16px;
margin-bottom: 20px; margin-bottom: 20px;
gap: 12px;
align-content: center; align-content: center;
} }
@@ -86,13 +85,11 @@ div.homeGreetings {
grid-template-rows: 1fr 2fr; grid-template-rows: 1fr 2fr;
} }
div.sidePanel { div.sidePanel {
position: fixed; position: fixed;
height: 100%; height: 100%;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
div.inputBox { div.inputBox {
margin-bottom: 0px; margin-bottom: 0px;
@@ -123,6 +120,6 @@ div.sidePanel {
} }
div.homeGreetings { div.homeGreetings {
grid-template-rows: auto; grid-template-rows: auto 1fr;
} }
} }

2
src/interface/web/app/page.tsx
View File

@@ -244,7 +244,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
props.isMobileWidth && props.isMobileWidth &&
<> <>
<div className={`${styles.inputBox} w-full shadow-md dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}> <div className={`${styles.inputBox} w-full shadow-md dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
<div className="flex gap-2 items-center justify-left pt-2 pb-4 px-10"> <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10">
{agentIcons.map((icon, index) => ( {agentIcons.map((icon, index) => (
<Card <Card
key={`${index}-${agents[index].slug}`} key={`${index}-${agents[index].slug}`}