From 146a02cf881bc5f9c3c88b3b82e7234037704a68 Mon Sep 17 00:00:00 2001
From: Clemens Stich <clemensstich@googlemail.com>
Date: Sat, 30 Dec 2023 22:06:25 +0100
Subject: [PATCH] - Fixed empty details not shown bug

---
 .../{EmptyDetails.jsx => EmptyDetails.tsx}       | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)
 rename runningdinner-client/webapp/src/admin/common/{EmptyDetails.jsx => EmptyDetails.tsx} (66%)

diff --git a/runningdinner-client/webapp/src/admin/common/EmptyDetails.jsx b/runningdinner-client/webapp/src/admin/common/EmptyDetails.tsx
similarity index 66%
rename from runningdinner-client/webapp/src/admin/common/EmptyDetails.jsx
rename to runningdinner-client/webapp/src/admin/common/EmptyDetails.tsx
index 07fae0b7..170fa83a 100644
--- a/runningdinner-client/webapp/src/admin/common/EmptyDetails.jsx
+++ b/runningdinner-client/webapp/src/admin/common/EmptyDetails.tsx
@@ -1,10 +1,14 @@
 import {useTranslation} from "react-i18next";
-import {Grid, Paper, Typography} from "@mui/material";
-import React, {useRef} from "react";
+import {Grid, Paper, Typography, useMediaQuery, useTheme} from "@mui/material";
+import {useRef} from "react";
 import {useDynamicFullscreenHeight} from "../../common/hooks/DynamicFullscreenHeightHook";
 import {useMasterDetailView} from "../../common/hooks/MasterDetailViewHook";
 
-export const EmptyDetails = ({labelI18n}) => {
+type EmptyDetailsProps = {
+  labelI18n: string;
+}
+
+export const EmptyDetails = ({labelI18n}: EmptyDetailsProps) => {
 
   const {t} = useTranslation('admin');
 
@@ -12,11 +16,13 @@ export const EmptyDetails = ({labelI18n}) => {
   const paperHeight = useDynamicFullscreenHeight(paperRef, 300);
 
   const {showDetailsView} = useMasterDetailView();
+  const theme = useTheme();
+  const isSmallDevice = useMediaQuery(theme.breakpoints.down('lg'));
 
   return (
     <div ref={paperRef}>
-      { showDetailsView && 
-          <Paper style={{height: paperHeight, display: 'flex' }} elevation={3}>
+      { !showDetailsView && !isSmallDevice &&
+          <Paper style={{height: paperHeight, display: 'flex' }} elevation={3} id="empty-details">
             <Grid container justifyContent={"center"} alignItems={"center"}>
               <Grid item>
                 <Typography variant="subtitle2" sx={{ px: 2 }}>{t(labelI18n)}</Typography>