move caption style custom component

src/components/PhotoViewer/index.tsx

@@ -34,7 +34,20 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { trashFiles } from 'services/fileService';
 import { getTrashFileMessage } from 'utils/ui';
 import { ChevronLeft } from '@mui/icons-material';
+import { styled } from '@mui/material';
 
+const CaptionContainer = styled('div')(
+    ({ theme }) => `
+    padding: 16px;
+    word-break: break-word;
+    text-align: right;
+    max-width: 375px;
+    font-size: 14px;
+    line-height: 17px;
+    background-color: ${theme.palette.backdrop.light};
+    backdrop-filter: blur(96px);
+`
+);
 interface Iprops {
     isOpen: boolean;
     items: any[];
@@ -473,7 +486,7 @@ function PhotoViewer(props: Iprops) {
                             <ChevronRight sx={{ pointerEvents: 'none' }} />
                         </button>
                         <div className="pswp__caption pswp-custom-caption-container">
-                            <div className="pswp-custom-caption"></div>
+                            <CaptionContainer />
                         </div>
                     </div>
                 </div>

src/styles/global.css

@@ -120,12 +120,6 @@ html, body {
     margin-right: 20px;
 }
 
-.pswp-custom-caption {
-    text-align: right;
-    width: 375px;
-    font-size:14px;
-    line-height: 17px;
-}
 
 .pswp-custom-caption-container {
     width: 100%;
@@ -133,7 +127,10 @@ html, body {
     justify-content: flex-end;
     bottom: 56px;
     background-color: transparent !important;
-    padding:16px;
+}
+
+.pswp__caption--empty{
+    display: none;
 }
 
 .bg-upload-progress-bar {