LogalDeveloper/owncast
0
Fork 0
Code Activity

fix(footer): add dynamic right padding to fix footer overflowing. Closes #2988

Browse Source
This commit is contained in:
Gabe Kangas
2023-05-05 14:37:01 -07:00
parent b41bb31473
commit 646c5616da
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/layouts/Main/Main.tsx
View File

@@ -16,6 +16,7 @@ import {
fatalErrorStateAtom, fatalErrorStateAtom,
appStateAtom, appStateAtom,
serverStatusState, serverStatusState,
isMobileAtom,
} from '../../stores/ClientConfigStore'; } from '../../stores/ClientConfigStore';
import { Content } from '../../ui/Content/Content'; import { Content } from '../../ui/Content/Content';
import { Header } from '../../ui/Header/Header'; import { Header } from '../../ui/Header/Header';
@@ -50,12 +51,16 @@ export const Main: FC = () => {
const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector); const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom); const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
const appState = useRecoilValue<AppStateOptions>(appStateAtom); const appState = useRecoilValue<AppStateOptions>(appStateAtom);
const isMobile = useRecoilValue<boolean | undefined>(isMobileAtom);
const layoutRef = useRef<HTMLDivElement>(null); const layoutRef = useRef<HTMLDivElement>(null);
const { chatDisabled } = clientConfig; const { chatDisabled } = clientConfig;
const { videoAvailable } = appState; const { videoAvailable } = appState;
const { online, streamTitle, versionNumber: version } = clientStatus; const { online, streamTitle, versionNumber: version } = clientStatus;
// accounts for sidebar width when online in desktop
const dynamicPadding = online && !isMobile ? '320px' : '0px';
useEffect(() => { useEffect(() => {
setupNoLinkReferrer(layoutRef.current); setupNoLinkReferrer(layoutRef.current);
}, []); }, []);
@@ -164,7 +169,9 @@ export const Main: FC = () => {
{fatalError && ( {fatalError && (
<FatalErrorStateModal title={fatalError.title} message={fatalError.message} /> <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
)} )}
<div style={{ paddingRight: dynamicPadding }}>
<Footer version={version} /> <Footer version={version} />
</div>
</Layout> </Layout>
<Noscript /> <Noscript />