Reduce content size on mobile when quoting
parent
5e180fc856
commit
eae9fb792c
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "chat",
|
"name": "chat",
|
||||||
"version": "0.0.23",
|
"version": "0.0.24",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -110,6 +110,10 @@ body {
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.App-content__reduced {
|
||||||
|
height: 58vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
lite-youtube {
|
lite-youtube {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { DndProvider, useDrop } from "react-dnd";
|
import { DndProvider, useDrop } from "react-dnd";
|
||||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||||
|
import cx from "classnames";
|
||||||
import {
|
import {
|
||||||
ChatHeading,
|
ChatHeading,
|
||||||
ChatMessageList,
|
ChatMessageList,
|
||||||
|
@ -58,7 +59,7 @@ function AppInner() {
|
||||||
contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
|
contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
|
||||||
}
|
}
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
// Scroll to the bottom after any drawer closes.
|
// Scroll to the bottom after any drawer closes.
|
||||||
|
@ -74,7 +75,12 @@ function AppInner() {
|
||||||
<ChatHeading />
|
<ChatHeading />
|
||||||
</div>
|
</div>
|
||||||
<div className="App-center">
|
<div className="App-center">
|
||||||
<div className="App-content" ref={contentWrapper}>
|
<div
|
||||||
|
className={cx("App-content", {
|
||||||
|
"App-content__reduced": quote,
|
||||||
|
})}
|
||||||
|
ref={contentWrapper}
|
||||||
|
>
|
||||||
{open ? (
|
{open ? (
|
||||||
<div className="App-drawer">{config.content}</div>
|
<div className="App-drawer">{config.content}</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
Loading…
Reference in New Issue