From f715f70f9e7a36571e347a615e3e50e8ceeeb3f0 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Fri, 24 Feb 2023 22:12:31 +0100
Subject: [PATCH] fix layout sizings

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
---
 src/components/Banner.tsx                     | 21 ++++++++++---------
 src/setup/Layout.tsx                          |  1 +
 src/video/components/VideoPlayer.tsx          |  1 +
 src/video/components/actions/HeaderAction.tsx |  1 +
 .../components/parts/VideoPlayerHeader.tsx    |  5 ++++-
 src/views/media/MediaErrorView.tsx            |  2 +-
 src/views/media/MediaView.tsx                 |  4 ++--
 src/views/notfound/NotFoundView.tsx           |  6 +++---
 8 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 180f445c..044bc524 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -11,16 +11,17 @@ export function Banner(props: { children: React.ReactNode; type: "error" }) {
   };
 
   return (
-    <div
-      ref={ref}
-      className={[
-        styles[props.type],
-        "flex items-center justify-center p-1",
-      ].join(" ")}
-    >
-      <div className="flex items-center space-x-3">
-        <Icon icon={icons[props.type]} />
-        <div>{props.children}</div>
+    <div ref={ref}>
+      <div
+        className={[
+          styles[props.type],
+          "flex items-center justify-center p-1",
+        ].join(" ")}
+      >
+        <div className="flex items-center space-x-3">
+          <Icon icon={icons[props.type]} />
+          <div>{props.children}</div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx
index c9a02dc8..599547f6 100644
--- a/src/setup/Layout.tsx
+++ b/src/setup/Layout.tsx
@@ -18,6 +18,7 @@ export function Layout(props: { children: ReactNode }) {
         style={{
           paddingTop: `${bannerSize}px`,
         }}
+        className="flex min-h-screen flex-col"
       >
         {props.children}
       </div>
diff --git a/src/video/components/VideoPlayer.tsx b/src/video/components/VideoPlayer.tsx
index 688f42e2..7f593e88 100644
--- a/src/video/components/VideoPlayer.tsx
+++ b/src/video/components/VideoPlayer.tsx
@@ -120,6 +120,7 @@ export function VideoPlayer(props: Props) {
                 <HeaderAction
                   showControls={isMobile}
                   onClick={props.onGoBack}
+                  isFullScreen
                 />
               </Transition>
               <Transition
diff --git a/src/video/components/actions/HeaderAction.tsx b/src/video/components/actions/HeaderAction.tsx
index 662cc02f..77712d60 100644
--- a/src/video/components/actions/HeaderAction.tsx
+++ b/src/video/components/actions/HeaderAction.tsx
@@ -5,6 +5,7 @@ import { useMeta } from "@/video/state/logic/meta";
 interface Props {
   onClick?: () => void;
   showControls?: boolean;
+  isFullScreen: boolean;
 }
 
 export function HeaderAction(props: Props) {
diff --git a/src/video/components/parts/VideoPlayerHeader.tsx b/src/video/components/parts/VideoPlayerHeader.tsx
index 57bd9e18..950f1a97 100644
--- a/src/video/components/parts/VideoPlayerHeader.tsx
+++ b/src/video/components/parts/VideoPlayerHeader.tsx
@@ -16,6 +16,7 @@ interface VideoPlayerHeaderProps {
   media?: MWMediaMeta;
   onClick?: () => void;
   showControls?: boolean;
+  isFullScreen?: boolean;
 }
 
 export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
@@ -31,7 +32,9 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
   return (
     <div
       className="flex items-center"
-      style={{ paddingTop: `${bannerHeight}px` }}
+      style={{
+        paddingTop: props.isFullScreen ? `${bannerHeight}px` : undefined,
+      }}
     >
       <div className="flex min-w-0 flex-1 items-center">
         <p className="flex items-center truncate">
diff --git a/src/views/media/MediaErrorView.tsx b/src/views/media/MediaErrorView.tsx
index 5dc634f4..6e611f33 100644
--- a/src/views/media/MediaErrorView.tsx
+++ b/src/views/media/MediaErrorView.tsx
@@ -9,7 +9,7 @@ export function MediaFetchErrorView() {
   const goBack = useGoBack();
 
   return (
-    <div className="h-screen flex-1">
+    <div className="flex-1">
       <Helmet>
         <title>{t("media.errors.failedMeta")}</title>
       </Helmet>
diff --git a/src/views/media/MediaView.tsx b/src/views/media/MediaView.tsx
index 5480684c..e4a09f7e 100644
--- a/src/views/media/MediaView.tsx
+++ b/src/views/media/MediaView.tsx
@@ -28,7 +28,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
   const { t } = useTranslation();
 
   return (
-    <div className="relative flex h-screen items-center justify-center">
+    <div className="relative flex flex-1 items-center justify-center">
       <Helmet>
         <title>{t("videoPlayer.loading")}</title>
       </Helmet>
@@ -62,7 +62,7 @@ function MediaViewScraping(props: MediaViewScrapingProps) {
   }, [stream, props]);
 
   return (
-    <div className="relative flex h-screen items-center justify-center">
+    <div className="relative flex flex-1 items-center justify-center">
       <Helmet>
         <title>{props.meta.meta.title}</title>
       </Helmet>
diff --git a/src/views/notfound/NotFoundView.tsx b/src/views/notfound/NotFoundView.tsx
index 7061e039..3d9e7032 100644
--- a/src/views/notfound/NotFoundView.tsx
+++ b/src/views/notfound/NotFoundView.tsx
@@ -17,18 +17,18 @@ export function NotFoundWrapper(props: {
   const goBack = useGoBack();
 
   return (
-    <div className="h-screen flex-1">
+    <div className="relative flex flex-1 flex-col">
       <Helmet>
         <title>{t("notFound.genericTitle")}</title>
       </Helmet>
       {props.video ? (
-        <div className="fixed inset-x-0 top-0 py-6 px-8">
+        <div className="absolute inset-x-0 top-0 py-6 px-8">
           <VideoPlayerHeader onClick={goBack} />
         </div>
       ) : (
         <Navigation />
       )}
-      <div className="flex h-full flex-col items-center justify-center p-5 text-center">
+      <div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center">
         {props.children}
       </div>
     </div>