Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix DM page UI (#250)

Browse Source
This commit is contained in:
Sam Samskies 2023-02-10 10:53:09 -10:00 committed by GitHub
parent 5153f5c90a
commit fb4d7924fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Pages/ChatPage.css
View File

@ -1,7 +1,10 @@
.dm-list {
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 66px - 50px - 70px);
--header-height: 72px;
--profile-container-height: 58px;
--write-dm-input-height: 86px;
height: calc(100vh - var(--header-height) - var(--profile-container-height) - var(--write-dm-input-height));
}
.dm-list > div {

7
src/Pages/ChatPage.tsx
View File

@ -2,7 +2,6 @@ import "./ChatPage.css";
import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { useInView } from "react-intersection-observer";
import ProfileImage from "Element/ProfileImage";
import { bech32ToHex } from "Util";
@ -25,7 +24,6 @@ export default function ChatPage() {
const pubKey = useSelector((s: RootState) => s.login.publicKey);
const dms = useSelector((s: RootState) => filterDms(s.login.dms));
const [content, setContent] = useState<string>();
const { ref, inView } = useInView();
const dmListRef = useRef<HTMLDivElement>(null);
function filterDms(dms: TaggedRawEvent[]) {
@ -37,10 +35,10 @@ export default function ChatPage() {
}, [dms]);
useEffect(() => {
if (inView && dmListRef.current) {
if (dmListRef.current) {
dmListRef.current.scroll(0, dmListRef.current.scrollHeight);
}
}, [inView, dmListRef, sortedDms]);
}, [dmListRef.current?.scrollHeight]);
async function sendDm() {
if (content) {
@ -68,7 +66,6 @@ export default function ChatPage() {
{sortedDms.map(a => (
<DM data={a as TaggedRawEvent} key={a.id} />
))}
<div ref={ref} className="mb10"></div>
</div>
</div>
<div className="write-dm">