- Fixed empty details not shown bug

Clemens85 · Dec 30, 2023 · 146a02c · 146a02c
1 parent 77689bc
commit 146a02c
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/.../webapp/src/admin/common/EmptyDetails.jsx → .../webapp/src/admin/common/EmptyDetails.tsx b/.../webapp/src/admin/common/EmptyDetails.jsx → .../webapp/src/admin/common/EmptyDetails.tsx
@@ -1,22 +1,28 @@
 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');
 
   const paperRef = useRef(null);
   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>