fix layout sizings

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

src/components/Banner.tsx

@@ -11,16 +11,17 @@ export function Banner(props: { children: React.ReactNode; type: "error" }) {
   };
 
   return (
-    <div
+    <div ref={ref}>
-      ref={ref}
+      <div
-      className={[
+        className={[
-        styles[props.type],
+          styles[props.type],
-        "flex items-center justify-center p-1",
+          "flex items-center justify-center p-1",
-      ].join(" ")}
+        ].join(" ")}
-    >
+      >
-      <div className="flex items-center space-x-3">
+        <div className="flex items-center space-x-3">
-        <Icon icon={icons[props.type]} />
+          <Icon icon={icons[props.type]} />
-        <div>{props.children}</div>
+          <div>{props.children}</div>
+        </div>
       </div>
     </div>
   );

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>

src/video/components/VideoPlayer.tsx

@@ -120,6 +120,7 @@ export function VideoPlayer(props: Props) {
                 <HeaderAction
                   showControls={isMobile}
                   onClick={props.onGoBack}
+                  isFullScreen
                 />
               </Transition>
               <Transition

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) {

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">

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>

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>

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>