diff --git a/web/components/MainLayout.tsx b/web/components/MainLayout.tsx index 00a32a36c..128d30721 100644 --- a/web/components/MainLayout.tsx +++ b/web/components/MainLayout.tsx @@ -17,6 +17,7 @@ import { ExperimentOutlined, EditOutlined, } from '@ant-design/icons'; + import classNames from 'classnames'; import { upgradeVersionAvailable } from '../utils/apis'; import { parseSecondsToDurationString } from '../utils/format'; diff --git a/web/components/common/ContentHeader/ContentHeader.module.scss b/web/components/common/ContentHeader/ContentHeader.module.scss index ca1db61b8..676d09735 100644 --- a/web/components/common/ContentHeader/ContentHeader.module.scss +++ b/web/components/common/ContentHeader/ContentHeader.module.scss @@ -4,11 +4,6 @@ padding: 20px; } -.buttonsLogoTitleSection { - // margin-left: 1.5vw; - // margin-right: 1.5vw; -} - .row { margin-bottom: 7px; } diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index e74aea7ff..ea527ac97 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -1,7 +1,7 @@ .root { display: grid; grid-template-columns: 1fr auto; - + height: 100%; background-color: var(--theme-color-background-main); .topSection { @@ -25,26 +25,3 @@ top: 50%; z-index: 999999; } - -.mobile { - &.root { - display: flex; - flex-direction: column; - height: calc(100vh - 64px); - overflow: hidden; - .topSection { - display: grid; - grid-template-rows: 30vh 5vh 5vh; - height: 40vh; - } - .lowerSection { - height: 60vh; - } - } - .mobileChat { - position: relative; - display: block; - height: 100%; - width: 100%; - } -} diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 151d5bfca..1eb9b541e 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -1,15 +1,10 @@ -/* eslint-disable react/no-danger */ import { useRecoilState, useRecoilValue } from 'recoil'; import { Layout, Tabs, Spin } from 'antd'; import { FC, useEffect, useState } from 'react'; -import cn from 'classnames'; import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage'; import { clientConfigStateAtom, - // chatMessagesAtom, - // chatDisplayNameAtom, - // chatUserIdAtom, isChatVisibleSelector, appStateAtom, isOnlineSelector, @@ -23,9 +18,7 @@ import { FollowerCollection } from '../followers/FollowerCollection/FollowerColl import styles from './Content.module.scss'; import { Sidebar } from '../Sidebar/Sidebar'; import { Footer } from '../Footer/Footer'; -// import ChatContainer from '../../chat/ChatContainer'; -// import { ChatMessage } from '../../../interfaces/chat-message.model'; -// import ChatTextField from '../../chat/ChatTextField/ChatTextField'; + import { ActionButtonRow } from '../../action-buttons/ActionButtonRow/ActionButtonRow'; import { ActionButton } from '../../action-buttons/ActionButton/ActionButton'; import { NotifyReminderPopup } from '../NotifyReminderPopup/NotifyReminderPopup'; @@ -105,13 +98,9 @@ export const Content: FC = () => { window.addEventListener('resize', checkIfMobile); }, []); - const rootClassName = cn(styles.root, { - [styles.mobile]: isMobile, - }); - return (
- +
@@ -168,26 +157,11 @@ export const Content: FC = () => {
- - {isChatVisible && isMobile && ( - - {/*
-
- -
-
*/} -
- )} - + + - + @@ -195,7 +169,7 @@ export const Content: FC = () => {
{isChatVisible && !isMobile && }
- {!isMobile &&
); }; diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss index eb3fafa3c..394308b7d 100644 --- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss +++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss @@ -11,8 +11,9 @@ padding: 0; color: var(--theme-color-palette-0); background-color: var(--theme-color-palette-4); - padding: calc(3 * var(--content-padding)); + padding: calc(2 * var(--content-padding)); border-radius: var(--theme-rounded-corners); + width: clamp(300px, 80%, 900px); // Allow the content to fill the width on narrow screens. @media only screen and (max-width: 768px) { @@ -28,4 +29,8 @@ div.summary { font-size: 18px; } + + p { + margin: unset; + } } diff --git a/web/components/ui/Footer/Footer.module.scss b/web/components/ui/Footer/Footer.module.scss index 860d4a15a..e3de0a729 100644 --- a/web/components/ui/Footer/Footer.module.scss +++ b/web/components/ui/Footer/Footer.module.scss @@ -12,7 +12,7 @@ font-weight: 600; border-top: 1px solid rgba(214, 211, 211, 0.5); - @media (max-width: 768px) { + @media (max-width: 600px) { display: none; } diff --git a/web/components/ui/OfflineBanner/OfflineBanner.module.scss b/web/components/ui/OfflineBanner/OfflineBanner.module.scss index cd5fde6ac..2c8d139ce 100644 --- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss +++ b/web/components/ui/OfflineBanner/OfflineBanner.module.scss @@ -4,7 +4,7 @@ } .innerContainer { - width: clamp(200px, 100%, 300px); + width: clamp(00px, 100%, 600px); display: flex; flex-direction: column; color: var(--theme-color-components-text-on-light); @@ -12,6 +12,7 @@ margin: 1rem auto; border-radius: var(--theme-rounded-corners); padding: 1rem; + font-size: 1.2rem; } .header { diff --git a/web/styles/globals.scss b/web/styles/globals.scss index 4236304c9..c42464009 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -95,12 +95,6 @@ body { } } -@media (max-width: 768px) { - body { - overflow: hidden; - } -} - .emoji { height: 30px; margin-left: 5px;