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

Improve styling of chat input, references UI across screen sizes

Browse Source 
Use tailwind screen breakpoints shorthand instead of js to apply
different styling for different screen sizes
This commit is contained in:
Debanjum Singh Solanky
2024-07-13 19:09:25 +05:30
parent 2668e42e7f
commit d51011314f
4 changed files with 12 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/interface/web/app/components/chatMessage/chatMessage.module.css
View File

@@ -3,12 +3,13 @@ div.chatMessageContainer {
flex-direction: column;
margin: 12px;
border-radius: 16px;
padding: 16px;
padding: 8px 16px 0 16px;
box-shadow: 0 4px 10px var(--box-shadow-color)
}
div.chatMessageWrapper {
padding-left: 24px;
padding-left: 1rem;
padding-bottom: 1rem;
}
div.chatMessageWrapper p:not(:last-child) {
margin-bottom: 16px;
@@ -20,7 +21,7 @@ div.khojfullHistory {
}
div.youfullHistory {
max-width: 80%;
max-width: 100%;
}
div.chatMessageContainer.youfullHistory {
@@ -71,10 +72,11 @@ div.chatFooter {
div.chatButtons {
display: flex;
justify-content: flex-end;
width: min-content;
border: var(--border-color) 1px solid;
border-radius: 16px;
position: relative;
bottom: -28px;
bottom: -12px;
background-color: hsla(var(--secondary));
box-shadow: 0 4px 10px var(--box-shadow-color);
}
@@ -124,11 +126,6 @@ div.trainOfThought.primary p {
@media screen and (max-width: 768px) {
div.youfullHistory {
max-width: 100%;
max-width: 90%;
}
div.chatMessageWrapper {
padding-left: 8px;
}
}

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

@@ -351,7 +351,7 @@ export default function ChatMessage(props: ChatMessageProps) {
isHovering &&
(
<>
<div title={formatDate(props.chatMessage.created)} className={`text-gray-400 relative top-2 left-2`}>
<div title={formatDate(props.chatMessage.created)} className={`text-gray-400 relative top-0 left-4`}>
{renderTimeStamp(props.chatMessage.created)}
</div>
<div className={styles.chatButtons}>